动态REM(移动端适配)

移动端是怎么做适配?
1.针对移动端的页面须添加viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
用width设置视口的宽度,设为device-width即设为设备宽度。用initial-scale设置页面最初加载时的缩放比例。用maximum-scale或者minimum-scale,user-scalable设置允许用户以怎样的方式放大或缩小页面。
2.针对用于移动端的样式添加媒体查询。
比如可引入外部 CSS 文件,该文件仅在设备宽度小于 500 像素时生效,只要在<link></link>中添加media="(max-width:500px)"属性即可。

手机端方案的特点
1、所有手机显示的界面都是一样的,只是大小不同
2、1 rem == html font-size == viewport width

动态REM

REM自适应方案
rem通过修改根元素的font-size
vh 视口高度
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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容