meta viewport
在head中加上
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
宽度等于设备宽度，initial-scale表示初始缩放比例，maximum-scale，minimum-scale分别表示最大，最小缩放比例，user-scalable表示是否允许用户缩放
媒体查询
媒体查询，简而言之就是根据不同的媒体(手机，平板，电脑等等)的查询条件，展示不同的样式，使用列子如下
@media (max-width: 800px){
body{
background: red;
}
}
如果某个媒体宽度小于800，那么body就变红，通过这种满足媒体的查询条件（移动端只要满足移动端对应的条件），才展示某种样式，从而做到适配
动态 rem 方案
百分比布局
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百分比布局</title>
</head>
<body>
<div class="container clearfix">
<div class="box">40%</div>
<div class="box">40%</div>
<div class="box">40%</div>
<div class="box">40%</div>
</div>
</body>
</html>
//css
*{
margin: 0;
padding: 0;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.box{
background: #ddd;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.box{
float: left;
width: 40%;
margin-left: 5%;
margin-right: 5%;
}
这种是通过设置元素宽度百分比来自适应，但是这种方法，高度没法确定，相当于将元素拉长了，很不好看，所以推荐使用下面的更好看的动态 rem 方案
动态 rem 方案
这种方法的思路是整体缩放，实现方式如下
①首先通过js让html的font-size和页面宽度相等或成倍数关系，目的是为了让rem和页面宽度挂钩，从而页面宽度变化的时候，rem的值也会变化
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态rem</title>
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth/10 + 'px}</style>')
</script>
</head>
<body>
<div class="container clearfix">
<div class="box">40%</div>
<div class="box">40%</div>
<div class="box">40%</div>
<div class="box">40%</div>
</div>
</body>
</html>
②然后页面上除了字体或者小单位长度（比如border），其他的诸如元素的长度，宽度，间距等都用rem来表示。这样每次缩放页面刷新后，rem的值都会根据页面的宽度的缩放等比缩放
//css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
body{
font-size: 16px;
}
.box{
background: #ddd;
text-align: center;
float: left;
width: 4rem;
height: 2rem;
margin: .5rem .5rem;
border: 1px solid red;
font-size: 1.2em;
}
补充：px自动转换为rem
上面的每一个rem都要计算，是不是觉得挺烦的，那么我们可以通过在在 SCSS 里使用 PX2REM来自动将px变成rem，以下是使用步骤
① 安装node-sass
- npm config set registry https://registry.npm.taobao.org/
- touch ~/.bashrc
- echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
- source ~/.bashrc
- npm i -g node-sass
②编写对应的sass文件，使用px编写
- mkdir ~/Desktop/scss-demo
- cd ~/Desktop/scss-demo
- mkdir scss css
- touch scss/style.scss
- 编写 scss/style.scss
//style.scss文件
@function px2rem( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度，你要根据设计稿的宽度填写。即开发基准的页面宽度，在这个宽度的页面下用px开发
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
body{
font-size: 16px;
}
.box{
background: #ddd;
text-align: center;
float: left;
width: px2rem(256);
height: px2rem(128);
margin: px2rem(32) px2rem(32);
border: 1px solid red;
font-size: 1.2em;
}
③执行转换，得到px转换成rem的css文件
- node-sass -wr scss -o css
注意直接运行node-sass -wr scss -o css是不会得到css文件的，这个命令是一个监听的命令，必须在执行这行命令后保存一下之前编辑的style.scss文件才会得到转换后的css文件
//转换后的style.css文件
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
.clearfix::after {
content: '';
display: block;
clear: both; }
body {
font-size: 16px; }
.box {
background: #ddd;
text-align: center;
float: left;
width: 4rem;
height: 2rem;
margin: 0.5rem 0.5rem;
border: 1px solid red;
font-size: 1.2em; }
网友评论