写移动端案例

方案：vw+rem
使用vw是为了让元素的大小能受到屏幕大小的变化而控制，让整体使用rem单位，跟随html中font-size的值变化，达到良好的适配效果。
注：
vw是视口的占比，如：width：100vw意为宽度为视口的100%;width:50vw意为宽度为视口的50%
Rem是相对大小单位，相对于根元素html的font-size大小，默认状态1rem=16px，若设置html{font-size：100px；}，则1rem=100px
100px是一个固定大小，吧font-size单位转化成vw，就可以让元素的大小跟随视口大小而改变，方法如下：
设计图是640px宽度时，满屏=100vw=640px/2=320px，则31.25vw=100px，就可以把html{font-size：100px；}改写为html{font-size:31.25vw;}意思都是一样，这样写css样式时单位用rem就可以参照html大小变化，而html参照视口大小变化，从而使得元素大小跟随视口大小变化的效果//同理，设计图是750px宽度时，满屏=100vw=750px/2=375px，则26.67vw=100px，就可以把html{font-size：100px；}改写为html{font-size:26.67vw;}意思都是一样。
步骤： 1、量取设计图宽度大小，如：750px，则确定设备像素比dpr为2，在css中设置宽度为350px。根元素htnl{font-size：26.67vw；}。内容区量取的数值以px为单位，数值除以2后再除以100单位就可以转化成rem。
注：设备像素比=物理像素/逻辑像素
物理像素：真正设备所显示的像素，设备厂商在生产时就已经规定好的(手机截图，用ps量取的像素大小)
逻辑像素：写在css样式中的像素
2、布局分配
头部和底部区域用固定定位固定在上下两边，设置body，html{height：100%}
中间内容区main嵌套一个子元素。main-con，让整个内容区main触发怪异盒，加padding，设置padding-top：头部区域高度；padding-bottom：底部区域高度；再让内容区子元素。main-con设置宽度百分百，高度百分百就可以了，如果内容区需要滚动条效果，给内容区最近的子元素设置overflow-y：auto；
3、内容区结构

真正内容区

4、其他部分样式提要： a、搜索框不用input标签写，用div（是一个超链接，跳转到搜索页面） b、图标使用iconfont（阿里巴巴矢量图标库），习惯写在i标签内， 如

法二：使用js插件
法一的一二三步不用写，直接把在ps中量取的数值除以100即可得到以rem为单位写在样式表