网页适配（pc端）

 ·PC端网页布局方案

一、静态布局

内容在一屏内显示,采用了内容框左右居中的办法,里面的内容绝    对于这个内容框定位。这样一来,在不同大小屏中,内容总是在中    间,看起来较正常。（目前市面上最常见的pc端布局方式）     这种方式中间内容框的取值范围一般在960 – 1100之间；因为内    容框中的元素定位全部相当于这个内容框，所以在不同的屏幕尺    寸下，大小不会发生改变。

二、自适应布局

就是为了使网页自适应的显示在不同大小终端设备上的新网页设    计方式及技术，需要开发多套界面来适应不同的终端。自适应是    为了解决如何才能在不同大小的设备上呈现同样的网页。

以前自适应布局会开发多套程序，以适配不同的设备大小；不过目前实际开发中，更多的是通过media媒体查询，实现几个关键断点的自适应：

                                                                (1) 阶梯式自适应

                                                                 (2) 平滑式自适应

        2-1.自适应布局--阶梯式自适应

                （1）有设计稿       

                 （2）只有一版设计稿         

                          当只有一版设计稿的时候，如果采用阶梯式自适应布局    ，那么需要计算不同尺寸下元素的缩放比例（庞大的工程量）,所以最好使用平滑式自适应布局方式;

   2-2.自适应布局—平滑式自适应

       （1）百分比布局 %         

                 通过计算设计稿的尺寸，计算元素占据的百分比，一般    只考虑宽度，高度固定；使用百分比布局一般会采用min-width    、max-width限制主体内容区域的宽度;

          (2) rem布局     

        rem布局可以更加完美的复刻设计稿样式(可以设置高度),并且可以适配任何尺寸的屏幕大小;但是rem单位不支持ie6/7/8,在考虑兼容的情况下rem单位就不是非常适合了。     而且rem是一个相对单位，在换算过程中肯定会有小数的存在，会导致某些布局不是非常完美(虽然很少发生),还有就是在缩放的时候文字的缩放的效果会非常明显，所以对于文字的设置推荐使用media媒体查询针对几个固定大小设置固定值;     世上没有最完美的布局方式，只有最合适的布局方式，所以就算使用rem在做布局时，也可以搭配px，%去完成。

          1>rem布局的核心技术：

                        （1）根元素(html标签)设置字体大小;     

                                           设置根元素字体大小的目的是想确定1rem等于多少px,方便在后续布局时可以确定元素的大小。在这里设置的时候需要用到反证法确定，就是你想让你的1rem等于多少px方便你后续的程序设计;   

         常用尺寸：         

                        固定尺寸：  1rem = 10px;   -> style =“font-size:10px”;       

                                             1rem = 100px; -> style = “font-size:100px”;         

                                              动态尺寸(默认字体大小为16px)         

                                              1rem = 62.5%;   -> style =“font-size:62.5%”;         

                                              1rem = 625%; -> style = “font-size:625%”;

        - 根节点设置字体两个问题

      (1) Chrome浏览器支持的最小字体是12px,所以如果设置62.5%的时候在Chrome浏览器下会被强行解析成12px,按理来说设置width:1rem;会被解析成12px（因为font-size是12px）,但是实际情况确实width被解析成了10px,这样就导致了字体与rem的关联产生了混乱, 所以推荐的解决方法： 设置font-size:625%; (1rem = 100px)，这样就避免了谷歌浏览器最小字体的限制问题;   

 (2) 推荐设置根节点字体时使用动态的方式设置     原因：设置成固定尺寸就丢失了用户自定义默认字体大小能力。

                     （2）JavaScript控制根元素的字体大小;

                                通过js控制根元素字体大小可以实现不同屏幕尺寸下，页面元素等比缩放。

预期的rem与px转换比例：100

设计稿	元素	font-size	css样式
1000	200	100px	2rem
实际屏幕尺寸	实际元素	实际font-size	css样式
800	？	？	2rem
600	？	？	2rem

        - 关于平滑自适应js代码的几个问题：

                1.推荐js代码写成内联形式写在body之前，主要目的是保证页面加载完毕之前，先设置好html的font-size属性值;     

                2.最终设置的font-size值为具体像素值，没有写成动态的，主要目的是考虑的尺寸的切换可能会产生不精确的font-size值，所以这里需要做个取舍;（推荐百分比）

三、流式布局

        流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。 流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。     

        一些常见布局：     左右布局，左侧固定，右侧百分比;     左中右布局，中间固定，左右百分比;     现在的主流布局方式都是多种布局方案配合起来一起使用;     

        代表结构：   栅格系统 ( 练习：制作自己的栅格系统 )     bootstrap响应式方案就是media媒体查询结合栅格系统完成的;

四、响应式布局

                响应式布局的核心就是一套程序适配所有终端，如果严格的说，响应式网站的建设是最困难的，因为你需要考虑pc端的不同尺寸，pad端的不同尺寸，手机端的不同尺寸，等等。但是，在实际开发中，结合自适应的特点，适配特定的几个关键节点，就可以相对简单的完成响应式项目开发;

Bootstrap中使用的关键点：

        

    响应式开发主流的布局方式：     

                media+栅格系统     meida+flex （考虑兼容问题）

        做响应式布局，一定要写上：

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

        补充一点： 如果做响应式开发，对于设计稿的还原度就不是很高了，所以在做响应式开发的时候，一定要与你们的领导或者ui多交流沟通，确定最终的形式;