现在是移动端时代盛行，所以移动网页也显得举足轻重。由于PC和移动屏幕宽度不一样，造成过往PC的网页在移动端上面呈现出效果不是很友好。最早苹果手机，乔帮主想出一个方案，定了一个980px的宽度用于显示PC网页内容，但是这种仅仅把PC网页缩放，网页呈现出来的内容因为缩放变得非常小。移动开发人员在css3出来之前，则是使用了流式布局，css3之后则是使用响应式布局来完成（媒体查询、rem）
1.流式布局
流式布局也成为百分比布局，可以设置width/height/padding/margin为百分比，那这里的百分比指的容器父级宽度/高度/宽度/高度多少。 边框和字体用px来设置，图片自适应则是使用max-width属性设置，看个例子
`
/* 流式布局 css*/
.container{
width: 100px;
height: 100px;
background: #ddd;
margin: 10px;
}
.test {
width: 50%;
height: 50%;
background: red;
}
/* 流式布局 html*/
<div class="container">
<div class="test"></div>
</div>
`
最终显示结果如：1-1所示
1-1
那这里我们可能会提出来，父级容器不好设置大小，因为我们不知道屏幕视口大小，这里我们就涉及到视口大小的设置，我们可以通过meta属性来设置视口大小
`
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width=device-width 视口为设备宽度
initial-scale=1.0 初始化的视口大小是1.0倍
maximum-scale=1.0 最大的倍数是1.0倍
user-scalable=0 不允许缩放视口
`
2.响应式布局
①通过媒体查询来完成
`
/* 响应式布局 */
@media screen and (min-width:1200px) {
body {
background: pink;
}
}
@media screen and (min-width: 700px) and (max-width: 1200px) {
body {
background: red;
}
}
@media screen and (max-width: 700px) {
body {
background: #ddd;
}
}
`
②通过rem来完成
rem是相对于网页根元素也就是HTML的font-size大小来设置的，网页根元素的font-size则可以根据设计图和屏幕实际宽度设定出来，比如设计图是640px，屏幕视口宽度是980px，然后我们一般设置1rem = 100px，则html的fontsize = 640/908 *100;也可以配合媒体查询来设置font-size大小，实现响应式。容器高度都可以通过rem来写；
`
/*
* @Author: linjian
* @Date: 2019-09-18 08:58:34
* @LastEditors: linjian
* @Description: file content
* @email: linjian@szkingdom.com
*/
function adjust(){
const desw = 640;
const clientWidth = document.documentElement.clientWidth;
const ratio = desw/clientWidth;
const html = document.html;
if (clientWidth > desw) {
html.style.width = desw + 'px';
html.style.margin = '0 auto';
}
html.style['font-size'] = ratio * 100 +'px';
}
`
③横竖屏切换可以通过设置ajust-text-size来完成字体的自适应
`
.ajust-font-size{
-webkit-text-size-adjust : 100% ;
-moz-text-size-adjust : 100% ;
-ms-text-size-adjust : 100% ;
text-size-adjust : 100%;
}
`
④rpx，小程序使用相对单位，能够进行屏幕自适应，规定屏幕宽度为750rpx，比如iPhone6，屏幕375px，屏幕实际物理像素750，则1rpx = 0.5px = 1物理像素，用法和rem类似，如果设计稿也是750设计，则设计稿上1像素就是等于1rpx。
看下其他几个单位，rem我们介绍过了，是相对于根元素HTML来相对运算，vw是将视口宽度等分为100份，比如视口980px，则1vw就是9.8px
我们可以通过`document.body.clientWidth`来获取宽度，然后算出1vw，进行响应式编写代码
网友评论