REM手机专用的自适应方案
rem 根元素的font-size
vh 视口高度
手机端方案的特点
1、所有手机显示的界面都是一样的,只是大小不同
2、1 rem == html font-size == viewport width
动态REM
1、在js中使用window.innerWidth获取到视口的宽度pageWidth
2、在js中
document.write('<style>html{font-size:}'+pageWidth+'px;</style>')
3.此时rem就是pageWidth的值。
将需要实现的布局使用rem为单位的比例设置即可实现完美响应。
4.注意浏览器fontsize的最小值
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>
px变rem
在 SCSS 里使用 PX2REM
-
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
-
mkdir ~/Desktop/scss-demo
-
cd ~/Desktop/scss-demo
-
mkdir scss css
-
touch scss/style.scss
-
start scss/style.scss
-
node-sass -wr scss -o css
编辑 scss 文件就会自动得到 css 文件
在 scss 文件里添加
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度,你要根据设计稿的宽度填写。如果设计师的设计稿宽度不统一,就杀死设计师,换个新的。
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
image.png
image.png
网友评论