资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS9:动态 REM-手机专用的自适应方案

CSS9:动态 REM-手机专用的自适应方案

joyqi / 1212人阅读

摘要：一定要强制自己用命令行，强制自己学英语，强制自己看文档。只有这三条都做了，才有可能成为前端水平的程序员。设计师的设计稿宽度需要统一那么相应得，这时会将自动变成宽度为的情况下这样就无需在手动换算的值了。

CSS9:动态 REM-手机专用的自适应方案

动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,
例如 : taobao.com 是专门的PC端
m.taobao.com 是专门的手机端,如果用电脑短访问网页布局就很奇怪
就像用手机访问pc端没有自适应的网站一样

当别人问会不会移动端开发,说会就行了,因为我会了动态REM!手机专用

1.REM是什么


em:一个m的宽度.如果面试官问,就说是一个汉字的宽度.这个单位是相对于font-size的

rem:root em,根元素的font-size.即的font-size.rem是相对于html的font-size的

vh:视口高度,总共100vh
vw:视口宽度,总共100cw
MDN-length

2. 12像素法则

网页的默认font-size是16px.
chrome浏览器默认设置能显示的最小字体是12px,也就是说如果给css样式小于12px,那么还会显示12px.这需要手动设置才行.但浏览器用户一般都不会去设置这个.所以让字体不要小于12像素,否则chrome浏览器没法显示

而firefox和safir浏览器就没有这个限制

3. em和rem的区别

对于汉字来说,宽高一样,所以font-size高度就是1个em的值(M这个字宽高基本一致,且宽度就是一个汉子的宽度.所以叫em)
区别:
em:自己的font-size的值
rem:根元素的font-size

4.动态REM

做响应式之前需要四个设计图(没图不做.因为设计不是前端该做的事,没有完整最终确定的的设计图之前,不要写代码.):
一个是窄屏,一个是宽屏,一个是ipad,一个是手机端的

不同的屏幕得到不同的样子算式响应式.

这篇博客不讨论响应式.只看手机端怎么做.

4.1手机端出现的问题:


pc端只需要选一个布局,然后定宽就可以了,

但是手机端,手机太多.

各种宽度像素都有很多.没有办法做响应式,
解决方法:

使用百分比:例如,宽度5%,40%,让它始终自适应.

整体缩放:做一个图,然后遇到宽度不一样的情况就整体缩放

4.2手机上百分比布局,固定宽度布局缺点


百分比布局缺点:宽度容易确定,因为可以和父容器作比较,是相对于父容器的.但是高度很难确定,比如高度写成20%,没有写过,想做一个宽高1:2的div,没法做,有很强的不确定性.高度没有办法跟宽度做任何的配合

如果想写出下面的设计

假设固定宽度为320px,固定宽高后出现的问题:

即如果手机宽度变化,那么就不会适应屏幕变化

如果居中,两侧就会变大,固定宽度只能让别的宽度的手机看到320px宽度的样子

想要的效果是所有元素按比例放大


单位应该相对于宽度,才能很好地还原设计稿
px,em都不行,vw可以,但是vw兼容性太差
所以退而求其次

4.3 最终解决方案

rem依赖的是的font-size,使用js使的font-size依赖pagewidth,那么rem就间接地依赖于页面的pagewidth


所以引入REM方案

在标签里加上如下代码,让1rem等于页面宽度


  
  
  动态REM

使用上面代码,使长度单位相对于页面宽度定义,从而适应任何不同屏幕尺寸的手机

不管屏幕宽度如何变化,布局总是完美适应屏幕

4.4优化

rem小于1不方便写
将pageWidth/100,于是就将款入分为100rem,刚才的0.4rem就可以写成40rem.这样用起来像vw.但是有一个问题

谷歌浏览器字体设置不能小于12px,所以除以100后,html标签的font-size变成了12px.
解决方法:之缩小10倍即可,10rem为页面总宽度

rem和其他长度单位混用

因为border这种小的单位,让它固定就可以,不需要缩放,因为1px缩放,border还显示1px.如果5px缩放,不显示2.5px,值显示2px,px不会变成小数.
font-size也不必缩放,将所有屏幕的手机font-size设置成一样大小,显示不影响美观

5.使用sass自动将设计稿的px转换为rem


px需要算,很麻烦。假如设计师给的设计稿是只有640px的宽度的一个设计稿，里面有一个div是256px×128px，那么宽度的rem就是256/64010rem，高度的rem就是128/64010rem，全部换成rem之后，所有的手机页面才能自动缩放。 这样的缺点显而易见，难道自己要一点点算rem的值？

有没有什么办法可以将px转换为rem并交给程序来做？有，sass。


一定要强制自己用命令行，强制自己学英语，强制自己看文档。
只有这三条都做了，才有可能成为前端水平20%的程序员。
现在前端很多工具没有窗口界面，我已经装了linu虚拟机，安装软件等工具包只需要一条命令，很方便。

5.1 安装并使用sass

使用npm安装（linux环境）
因为国内特殊的网络环境，不能直接安装，所以需要先设置国内的镜像，设置淘宝源
npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
设置之后还没用，因为node-sass会下载亚马逊上的一个资源，所以要设置一下，从淘宝上下载资源，不要去国外下载
echo "export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"" >> ~/.bashrc
source ~/.bashrc

全局安装
npm i -g node-sass
如果使用windows，那么一定会报错，我也不知道为什么，所以推荐从现在开始，编程使用linux或者mac，安装工具就一句命令行的事情。如果放不下windows，就在Windows上装虚拟机，在安装深度linux，deepin或ubantu都可以。

安装好之后，接下来做个示例：
mkdir ~/Desktop/scss-demo
cd ~/Desktop/scss-demo
mkdir scss css
touch scss/style.scss
start scss/style.scss
在scss文件夹里创建style.scss接下来：

node-sass -wr scss -o css
使用上面的命令监听scss文件夹。开始实验：

这时候编辑 scss 文件就会自动得到 css 文件

例如，在style.scss里写

html{
  color:red;
  p{
  color:blue;
 }
}

在css里没有这样的语法
这时观察css文件

自动转化成符合正确语法的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;
}

那么相应得，css这时会将px自动变成em（宽度为640px的情况下）

.child {
  width: 5rem;
  height: 2.5rem;
  margin: 0.625rem 0.625rem;
  border: 1px solid red;
  float: left;
  font-size: 1.2em; }

这样就无需在手动换算rem的值了。

rem宽度自适应 动态rem js动态rem aspx适应手机

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116843.html

相关文章

  • CSS9:动态 REM-手机专用的自适应方案

    摘要：一定要强制自己用命令行，强制自己学英语，强制自己看文档。只有这三条都做了，才有可能成为前端水平的程序员。设计师的设计稿宽度需要统一那么相应得，这时会将自动变成宽度为的情况下这样就无需在手动换算的值了。 CSS9:动态 REM-手机专用的自适应方案 动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是...

    ityouknow 评论0 收藏0

  • 前端面试题（移动适配，闭包，this，HTTP状态码，排序思路，页面加载，数组去重）

    摘要：例如状态码表示响应成功。答状态码表示服务器已接受请求，但尚未处理。状态码表示发送的请求需要有通过认证的认证信息。状态码表示服务器端在执行请求时发生了错误。响应报文也是由三部分组成状态码响应报头和响应报文。 前端面试题（移动适配，闭包，this，HTTP状态吗，排序思路，页面加载，数组去重） 1 请写出一个符合 W3C 规范的 HTML 文件 请写出一个符合 W3C 规范的 HTML 文...

    chaos_G 评论0 收藏0

  • 真的,移动端尺寸自适应与dpr无关

    摘要：做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。 做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应 首先标题说的自适应,可能自适应在不同人眼里理解不同，特别与响应式的关...

    omgdog 评论0 收藏0

  • 真的,移动端尺寸自适应与dpr无关

    摘要：做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。 做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应 首先标题说的自适应,可能自适应在不同人眼里理解不同，特别与响应式的关...

    617035918 评论0 收藏0

发表评论

登陆后可评论

0条评论

joyqi

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<