iOS和android浏览器都是基于Webkit核心，chrome/opera都支持viewport meta元素覆盖默认的画布缩放设置，只需要在html的<head>标签中插入一个<meta>标签，<meta>标签可以设置具体的宽度或者缩放比例。
示例：
<meat name="viewport" content="width=device-width,initial-scale=2,maximum-scale=3,user-scalable=no">
width=devie-width 告诉浏览器的页面宽度应该等于设备的宽度
initial-scale=2 页面的缩放比例，设置比例为设备尺寸的2倍
maximum-scale=3 允许用户将页面最多放大至设备宽度的3倍
user-scalable=no 禁止用户缩放
一，粘贴以下代码到<head></head>标签之间
<meta name="viewport" content="width=device-width,initial-scale=1.0">
设置比例为1.0这表示浏览器将按照其视口的实际大小来渲染页面
二，针对不同视口宽度的修正设计
设置viewport meta标签之后，现在我们针对的不同视口修正设计效果，创建css样式表，并在页面中调用
常见媒体查询：
平板电脑布局：481px 到768px。样式继承自：移动设备布局
@media only screen and (min-width:481px){
.calss{
background:#333;
}
}
桌面电脑布局:769px至最高1232px，样式继承至移动设备布局和平板电脑布局
@meida only screen and(min-width:769px){
.class{
background:#666;
}
}
三：字体/弹性图片/视频
对于响应式网站来说应该有响应式的字体，一个响应式的字体大小应该关联她的父容器的宽度，这样他才可以适应客户端的屏幕。
css3规范引入了一个新的单位叫rem，和em类似，但相对于HTML元素来说，rem更易于使用。
rem 是相对于HTML元素的，不要忘了重置HTML的字体大小：
html{font-size:100%;}
完成后，您可以定义响应式的字体大小，如下所示：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1100px){body{font-size:1.5rem;}}
弹性图片：
我们需要为图片设置max-width:100%和height:auto,来实现其弹性化，IE需要额外配置
img{
max-width:100%;
height:auto;
width:auto\9;/*ie8*/
}
弹性内嵌视频
同样的，对于视频，我们也许要做max-width:100%的设置；但是safari对embed的该属性支持不是很给力，所以我们以width:100%来代替:
.video embed,
.video object,
.video iframe{
width:100%;
height:auto;
}
网友评论