响应式页面布局

根据设备不同显示不同的页面效果

1 使用viewport

//width=device-width:网页宽度等于屏幕宽度 initial-scale=1原始缩放比例为1.0，网页初始大小占满屏幕；
<meta name="viewport" content="width=device-width,initial-scale=1" />

2 加载不同css

//宽度小于767 加载phone.css
<link rel='stylesheet' type="text/css" media="screen and (max-width:767px) " href="phone.css" />

//屏幕宽度大于768就加载style.css
<link rel="stylesheet" type="text/css" media="screen and (min-width:768)" href="style.css" />

3 设置字体大小

网页文字默认16像素 font-size:100%
设置 html { font-size:62.5%}；// 1rem = 10px;
font-size:1.2rem;//表示12像素

4 所有像素不要使用绝对宽高，要使用相对宽高

width:62%

5 图片
img{max-width:100%}
object,embed{max-width:100%}//多媒体标签