"本文介绍了在不同浏览器中实现CSS样式兼容的方法，包括 Gecko、WebKit、Presto 和 Trident 内核的浏览器前缀。同时，详细讲解了视口标签``的使用，如何设置布局视口以适应移动设备，并通过实例展示了如何控制页面缩放。此外，讨论了em和rem单位在响应式设计中的应用，强调了rem在创建适应性网站时的优势。"
css样式兼容不同浏览器时需添加对应浏览器前缀：
Gecko内核,css前缀为"-moz-",代表 firefox
WebKit内核,css前缀为"-webkit-"，代表 chrome、苹果、微信等
Presto内核,css前缀为"-o-",代表Opera(欧朋)
Trident内核,css前缀为"-ms-",代表IE
理想视口viewport
设置布局视口的宽度为特定的值
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
width=device-width 网页宽度等于设备的宽度，适应设备的宽度
user-scalable=no 是否阻止用户进行缩放
initial-scale=1.0 设置页面的初始缩放程度
initial-scale=2.0 一进入移动端时放大两倍，pc端不变
initial-scale=0.5 一进入移动端时缩小一半，pc端不变
maximum-scale=1.0 设置最大的缩放程度（用户可放大的程度）
minimum-scale=1.0设置最小的缩放程度
视口标签的作用
使用Chrome浏览器模拟移动环境测试该示例
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>视口标签</title>
</head>
<body>
<p>大家来观察没有写视口标签和添加视口标签的区别</p>
</body>
布局网页内容
相对长度单位em、 rem
一般浏览器字体大小默认为16px
em的特性：继承父级元素的字体大小，值不是固定的，相对父级的字体大小而发生变化
通常不使用 em 单位控制字体大小
多用于首行缩进: text-indent:2em;
body{
font-size: 62.5%;
}
rem的特性：相对的HTML根元素字体大小变化（和父节点无关）
一般默认的把html根节点设置为10px（62.5%）或者是100px，方便后续计算
一切可扩展都应该使用 rem 单位
响应式网站可以使用rem去做适配
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
