媒体查询参数设置详解
来源:互联网 发布:形容女生的词语网络词 编辑:程序博客网 时间:2024/06/05 06:36
响应式的核心是媒体查询,而媒体查询用的最多的还是浏览器尺寸查询。
浏览器尺寸媒体查询用法总结:
首先设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
大多数媒体属性带有“min-”和“max-”前缀,用于表达“小于等于”和“大于等于”。
媒体查询可以把浏览器的尺寸定位几个档次:
小屏幕(平板,大于等于768px)
@media (min-width: 768px) {}
中等屏幕(桌面显示器,大于等于992px)
@media (min-width: 992px) {}
大屏幕(大桌面显示器,大于等于1200px)
@media (min-width: 1200px) {}
以上3种尺寸的分别方法基本就涵盖了目前设备的尺寸要求了。当然如果还想细分屏幕尺寸的话也是可以的。
0 0
- 媒体查询参数设置详解
- CSS详解— —媒体查询(2)
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 媒体查询
- 优化SQL脚本—求所有投资人首月投资金额
- Mybatis中查询的参数为Map条件中是in 数据组参数
- 集群和负载均衡和分布式
- C#界面设计之复选按钮与单选按钮的使用实例
- saleae逻辑分析仪使用分享
- 媒体查询参数设置详解
- Android之NDK开发
- POJ 1167 The Buses
- Thrift
- Hive 个人笔记
- 大端机,小端机入门级理解
- 查看tomcat版本及所关联的jdk
- android中常常使用shape来定义控件的一些显示属性
- restTemplete webService in spring