浏览器的兼容问题

浏览器兼容与响应式布局

主流浏览器有5种：IE、chrome、firefox、safari、opera.

 

浏览器兼容

  浏览器私有前缀

1. -moz-            火狐浏览器
2. -webkit-          360、苹果、猎豹、搜狗、QQ、 Chrome等浏览器
3. -o-               Opera/欧朋浏览器
4. -ms-              IE、百度等浏览器

 

 响应式布局方法

1. 百分比布局
2. bootstrap栅格系统
3. Flex 伸缩盒布局

1. 媒体查询

综合：流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。

 媒体查询方法：

1. 屏幕使用screen;设备使用print;手机设备使用device-width
2. Window.screen  命令包含显示设备的信息
3. Screen.height / screen.width 两个命令，用来了解设备的分辨率

Head标签中需要引入：

1. <meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no” />

具体含义如下：

1. Width: 控制viewport的大小。如device-width为设备的宽度。
2. Height: 和width相对应，指定高度。
3. initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
4. maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
5. minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
6. user-scalable： 用户是否可以手动缩放，值可以是: yes,ture  可以缩放；no,false 不可以缩放；

关于Media Query浏览器的兼容性，除了IE8及其以下的浏览器不支持，其他的主流浏览器基本上都支持

知名互联网公司 移动端字体大小

类型	基准字体	字体区间
国外官网类	18~16px	大字体 ≈30px 标题字体 22px~18px正文字体 18~14px底部最小字体 14~12px
网购类	14~12px	标题 16px正文 14~12px底部最小字体 12px
国内媒体类	16px	标题 22px~18px正文 18~16px附加信息 12px底部最小字体 12px

行高为 1.3、1.35、1.45、1.5