章节
问答
课签
笔记
评论
占位
占位

Responsive设计——不同设备的分辨率设置

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求:

1.1024px显屏

@media screen and (max-width : 1024px) {                    
/* 样式写在这里 */          
}     

2.800px显屏

@media screen and (max-width : 800px) {              
/* 样式写在这里 */          
}     

3.640px显屏

@media screen and (max-width : 640px) {              
/* 样式写在这*/            
}     

4.iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              
/* 样式写在这 */            
}     

5.iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {         
/* 样式写在这 */            
}     

6.iPhone  Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              
/* 样式写在这 */            
}     

现在有关于这方面的运用也是相当的成熟,twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下:

@media (max-width: 480px) { ... }              

@media (max-width: 768px) { ... }              

@media (min-width: 768px) and (max-width: 980px) { ... }      

 @media (min-width: 1200px) { .. }

任务

复杂的示例在这里也无法学习,我们来看一个简单的示例,在宽屏下是3列布局,当屏幕在小于480时是单列显示。看一下右侧CSS编辑器中的代码,思考一下效果实现的原理。

 

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?