自适应页面的实现方式

Posted 2021-03-07 laiylm

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

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:1920px){}
@media screen and (min-width:1200px) and (max-width: 1919px){}
@media screen and (min-width:1024px) and (max-width: 1199px){}
@media screen and (min-width:998px) and (max-width: 1023px){}
@media screen and (min-width:768px) and (max-width: 997px){}
@media screen and (min-width:320px) and (max-width: 767px){} 

 

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

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