单位
- px ==>像素
- em ==>一个m的宽度,一个汉字的宽度
- rem ==>root em ,根元素(HTML)的font-size
- vh ==>viewport height 视口高度
- vw ==>视口宽度
注意:
- 网页默认的font-size为16px;
- 如果chrome设置了最小字号为12px,就算在css中设置了font-size:6px,也会显示为12px
rem和em的区别
- rem:HTML的font-size
- em:自己的font-size
手机端使用REM
- 所有手机显示的界面都是一样的,只是大小不同,所以把一切单位以宽度为基准就可以完美还原设计。
- 使用js动态调整REM,使1 rem == viewport width;
<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>
- rem可以和其它单位一起使用。
在 SCSS 里使用 PX2REM
- 安装node-sass
- npm config set registry https://registry.npm.taobao.org/hanshu
- touch ~/.bashrc
- echo 'export
SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc - source ~/.bashrc
- npm i -g node-sass
如果安装时出现权限方面的错误,则可以运行
sudo npm install --unsafe -perm -g node-sass
- 使用node-sass将scss转换为css
- 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;
}
然后在css中将需要写长度的地方引用函数 px(设计稿的宽度)即可。
网友评论