响应式页面开发

布局方式

1. 固定布局

2. 流式布局：流式布局是以百分比作为单位的，我们要牢记如下公式：
   百分比宽度 = 目标元素宽度 / 上下文元素宽度
   这种布局优点：可以自适应布局，根据不同的分辨率显示不同的宽度。
   缺点：在行高或者marginTop在大屏幕下看起来太高，在小屏幕下看起来太窄。

3 弹性布局：弹性布局是以em作为单位的，同样弹性布局也支持如下公式：
百分比尺寸 = 目标元素尺寸 / 上下文元素尺寸
使用em将文字像素px转换为相对单位，现在浏览器默认文字的大小是16px，如果一个文字大小是48px，上下文元素是(浏览器)，那么转换成em 就是 48/16 = 3em. 但是如果一个h1标签的font-size是48px, h1标签内部span标签font-size 是24px,那么h1标签的font-size = 48 / 16 = 3em h1 span {font-size = 24/16 =1.5em}.弹性布局也支持响应性web设计。

媒体查询

@media 设备类型 and (设备特性-宽度) {
     // css 样式
}

可以指定的值 含义

all 所有设备
screen 显示器
print 打印用纸或打印预览视图
handled 便携设备
tv 电视机类型的设备
speech 语音和音频合成器
braille 盲人用点字法触觉回馈设备
embossed 盲人打印机
projection 各种投影设备
tty 使用固定密度字母栅格的媒介，比如电传打字机和终端

Css设备特性共有13种，是一个类似于CSS属性的集合。但与CSS属性不同的是，大部分设备特性的指定值接受min/max的前缀，用来表示大于等于或小于等于的逻辑，以此避免使用<和>这些字符。

image.png

1. 最大宽度960px一种布局：
   @media screen and (max-width:960px) {<=960}

2. 最小宽度600px 另一种布局：
   @media screen and (min-width:600px) {>=600}

3. 宽度在600px 到 960px之间，如下:
   @media screen (min-width:600px) and (max-width:960px) {600<=x<=900}

4.外联样式使用link标签来引用样式：



如果对于像ipad来说，我们可以在上面增加一个属性 orientation(landscape或portrait) 横屏或者竖屏。

做h5页面移动端开发需要在head标签内引入下面这句话。（如果没有引入的话，页面的字体等大小就不正常了）。

具体含义如下：
Width: 控制viewport的大小。如device-width为设备的宽度。
initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
user-scalable： 用户是否可以手动缩放，值可以是:
1， yes,true允许用户缩放；
2, no、false不允许用户缩放。 (只设置这一个属性，有的浏览器并不生效，我们需要配合maxinum-scale和mininum-scale最大缩放与最小缩放分别为1:1)。

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

图片

1. 对于背景图片来说，css3有个属性 background-size可以等比例缩放背景图片。
   但是对于小屏幕的移动设备去加载大背景图片的话，有缺点的，最主要的缺点是要更大的带宽，浪费流量。所以我们要想做的更好的话，可以使用媒体查询根据设备的宽度来渲染不同大小的背景图片。
2. 对于页面上的标签图片的话：
   2.1. 如果只是页面上静态图片的话，不考虑带宽的情况下，可以使用width=100%”等比例缩放，如：
   2.2. 如果是商品图或者页面上有多个的话，考虑不浪费不必要的带宽，需要后台根据不同的设备宽度大小来返回不同的json数据的图片来给我们前端，之后我们前端使用JS动态的渲染出来。
   在现代浏览器中（包括IE8+）中要实现图片随着流动布局相应缩放非常简单，只需要在css中加上这么一句代码：
   img { max-width:100%; }
   含义是：确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度，所以当窗口或容器的可视部分变窄时，图片的最大宽度值也会相应的变小，图片本身永远不会覆盖容器。

css单位px，em，rem的区别

1. Px是css中最基本的长度单位，在PC端，设计稿多少像素，页面css就写多少像素。

2. em 是相对单位，相对于上下文元素而言，一般情况下，浏览器默认的字体大小是16px，也就是1em等于16px；比如：

3. rem也是相对单位。rem是相对于html根元素来计算的，这就是说只要在根节点设定好参考值，那么全篇的1rem都相等，计算方式同 em，默认1rem=16px; 同理你可以 设定html { font-size:62.5% } 那么1rem就等于10px，以此类推。。。
   比如设置html根元素 如下代码：
   html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}
   当一个p元素是24px的话，那么转换成rem为单位的话，那么只需要如下这样写即可：
   p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }
@media (min-width:1000) {}内字体大小希望可以写2个，font-size:24px;font-size:2.4rem,这是为了未来的移动设备独立像素超过1000后能使用rem作单位。

元素未知宽度居中

第一种方法：
假如页面html结构如下：

What is CSS?

只需要给父级元素div 设置 文本对齐是 居中对齐。子元素设定display:inline-block即可。如下代码：

div{text-align:center}
p{display:inline-block}

第二种方法如下：

div{position:relative; left:50%; float:left;}
p{position:relative; left:-50%;}

响应式web设计如何实践

1. 首先需要在页面头部引入这行meta代码，如下：
   
   还要引入这一句：
   
   我们的代码有类似于电话这样的数字的时候，因为有的手机上它会自动转换成可以拨打电话，所以我们加上这句就不会了。

2. 响应性web设计需要使用css3媒体查询media来写不同的css样式。
   在移动端浏览器中或者某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方定义为，设备的物理像素与设备的独立像素的比例，也就是 devicePixelRatio = 设备的物理像素/ 设备的独立像素。这三个参数不是固定的，只要其中2个确定了，那么就可以知道第三个参数了，设备的物理像素我们可以映射到设备的分辨率的宽度，独立像素我们可以映射到媒体查询media定义的宽度。而比列devicePixelRatio我们可以理解为css中的1像素(px)在设备上占用多少个物理像素。比如我们目前常见的手机分辨率如下：

   
   
   

   image.png
   
   

   如上小米3分辨率为1080，独立像素为360px，那么比列为3，也就是一个css的1px，占用3个物理像素，小米2和红米Note分辨率为720，独立像素还是360px，所以比列为2，所以小米3相对于小米2与红米Note更清晰。同理iphone和其他类型的手机也一样。

而上面说的独立像素就是360px，正是我们css中的媒体查询关联的。
针对手机屏幕的宽度是360 384等屏幕的宽度
width(宽度可以设置为384px) max-width:384来计算 但是边距 字体大小等还是按照360px来计算
@media (min-width:360px) and (max-width: 399px) {}

我们都知道在IE6-8下 IE是不支持css3中的媒体查询的，只需要在网上下载 respond.js下来放到我们本地，然后页面上引入即可。respond.js的github地址如下：
https://github.com/scottjehl/Respond/