关于 响应式布局 [ 转 ]

原文地址

 前言：

响应式，即设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

 

 视口：

电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。

 

 约束视口：

<meta 
  name="viewport" 
  content="
    width=device-width, 
    initial-scale=1.0,
    maximum-scale=1.0,
    user-scalable=0
  " 
/>

width=device-width   视口为设备宽度（自定义的宽度）//不设置的话默认为980px
initial-scale=1.0         初始化的视口大小是 1.0 倍
maximum-scale=1.0  最大的倍数是 1.0 倍
user-scalable=0         禁止用户缩放视口

 

 图片：

img {
  max-width: 100%;
}

效果为，图片缩放到其容器宽度的100%，即使设备旋转后变宽，也能响应。

 

 媒体查询：

媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。语法如下：

/* 
* 在媒体查询外面写的第一条规则，是“基本的”样式，它适用于任何设备。
* 在此基础上，我们再为不同视口、不同能力的设备，渐进增加不同的视觉效果和功能。 
*/
body { background-color: grey; }
@media screen and (min-width:1200px){
  body{ background-color: pink; }
}
@media screen and (min-width:700px) and (max-width:1200px){
  body{ background-color: blue; }
}
@media screen and (max-width:700px){
  body{ background-color: orange; }
}

 

 rem响应式布局：

 "em" 表示父元素的 font-size 的倍数；而 "rem" 是HTML元素的 font-size 的倍数。后续所有样式均已 "rem" 以达到响应式。

html{
  font-size:100px;    /* 1rem=100px */
}
.some-box {
  width: 1rem;    /* 宽度100px */
}