自适应页面的实现方式

CSS3 媒体查询 media

媒体查询技术的原理：通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。
常用匹配特征 media features
width/height: 浏览器宽高
max-width： 表示小于最大宽度时生效
min-width： 表示大于最小宽度时生效
device-width/device-height: 设备屏幕分辨率宽高
resolution: 设备分辨率
orientation：portrait(纵向),高度大于等于宽度时，landscape(横向),高度小于宽度时

media使用方式

1、link行内引入：

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">

2、media导入：

@media screen and (max-width: 990px){
    .container{
        background: orange;
    }
}

@media screen常用自适应方案

@media screen and (min-width:1200px){}
@media screen and (max-width:1200px){}
@media screen and (max-width:1024px){}
@media screen and (max-width:998px){}
@media screen and (max-width:768px){}
@media screen and (max-width:667px){}
@media screen and (max-width:540px){}
@media screen and (max-width:414px){}
@media screen and (max-width:375px){}
@media screen and (max-width:360px){}
@media screen and (max-width:320px){}
@media screen and (max-width:280px){}

百分比布局 & rem布局

移动端单位：rem

css3中的rem单位：https://www.cnblogs.com/liu-di/p/11254583.html https://www.jianshu.com/p/ccbe9eb285e2 https://www.jianshu.com/p/96c2f6542e21 https://zhuanlan.zhihu.com/p/290732918

浏览器的默认的font-size是16px，1rem默认就等于16px。（chrome最小字体为12px）
如果设计师给的图是750px，那么1rem就是750/16=46.875px，则div的宽度60px=（60/46.875）rem=1.28rem

rem局限性：目前ie不支持 对pc页面来讲使用次数不多。数据量大（所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配）。

@media：应用广泛  适用于 pc端  手机页面，通常做自适应布局时  我们比较常用，但重复的代码比较多。几个常用临界点：正常编写 适用于 1200----1440的台式机

（用rem做PC端的比较少，百分比普适性好一些）

 

页面自适应，是指页面内容自动适应屏幕大小。实现自适应的方法有多种：
1、简易场景实现自适应：浮动、页面居中、设置百分比属性、自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。
2、如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用媒体查询技术，让页面根据不同屏幕尺寸来加载不同代码模块以实现适配不同屏幕的目的。这种方式需要编写多套代码，虽然工作量大，但对于不同屏幕尺寸的设备都有单独一套CSS代码，维护起来更方便。
3、响应式布局，响应式布局是指根据不同屏幕尺寸自动调整页面显示效果实现自适应(也要用到媒体查询技术)。响应式布局一般有栅格系统布局，flex布局。bootstrap框架的核心就是栅格系统。 

 

flex布局自适应：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

参考：https://segmentfault.com/a/1190000015759719?utm_source=tag-newest