移动端PC端自适应

这是我把几个自适应的方式做了整理，供大家参考

媒体查询：

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

这段代码的几个参数解释：

width = device-width：宽度等于当前设备的宽度

initial-scale： 初始的缩放比例（默认设置为1.0）

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

html5要适应各种分辨率的移动设备，应该使用rem尺寸单位

        @media (max-width: 320px) {

        html{font-size:10px}

        @media (min-width: 321px) and (max-width:374px){

        html{font-size:12px}

        @media (min-width: 375px) and (max-width: 414px){

        html{font-size:14px}

        @media (min-width: 415px) and (max-width: 479px){

        html{font-size:16px}

        @media (min-width: 480px) and (max-width: 568px){

        html{font-size:18px}

        @media (min-width: 569px) and (max-width: 666px){

        html{font-size:20px}

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

把与元素尺寸有关的css，如width,height,line-height,margin,padding等都以rem作为单位，这样页面在不同设备下就能保持一致的网页布局。

举例来说，网页有一个.item类，设置了width为3.4rem，该类在不同分辨率下对应的实际宽度如下：

        321px <= device-width <= 375px，font-size:11px        --->  .item的width：34px

        376px <= device-width <= 414px，font-size:12px        --->  .item的width：37.4px

        415px <= device-width <= 639px，font-size:15px        --->  .item的width：40.8px

        640px <= device-width <= 719px，font-size:20px        --->  .item的width：51px

        720px <= device-width <= 749px，font-size:22.5px      --->  .item的width：76.5px

        750px <= device-width <= 799px，font-size:23.5px      --->  .item的width：79.8999999px

        800px <= device-width         ，font-size:25px        --->  .item的width：85px

Bootstrap栅格布局

.col-xs-* 针对超小屏幕 手机（<768px）

.col-sm-* 小屏幕 平板 (≥768px)

.col-md-* 中等屏幕 桌面显示器 (≥992px)(栅格参数)

.col-lg-* 针对特大的（≥1200px）

栅格化布局方法和思路其实都很简单，就按照bootstrap的思路来，就是将一个容器，宽度一定或100%的，用一个分子去把这个容器分为很多份，bootstrap的方法是用百分比的方法来将这个容器分为n等份，这就是栅格化的思路，

rem只能在移动端进行布局，然后等比例的缩放，在pc端还是用px这种惯用的方法去实现比较好，rem并不能实现响应式布局，这是重要的缺点，rem只在移动端起到一个比较好的作用，当然以后的发展会说不定，也可能还有人发明出厉害的设计方案。而百分比的布局，这种方式有一点是有很大问题的，他是无法做到定高的，这是为什么，因为百分比定高，有时候bug很明显，所以很多人用px定高，这样不同分辨率的手机会使得显示不一样。