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

时间 2019-11-10

标签 css9 css 动态 rem 手机专用自适应方案栏目 CSS 繁體版

原文原文链接

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

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

当别人问会不会移动端开发,说会就好了,由于我会了动态REM!手机专用html

1.REM是什么

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

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

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

2. 12像素法则

网页的默认font-size是16px.
chrome浏览器默认设置能显示的最小字体是12px,也就是说若是给css样式小于12px,那么还会显示12px.这须要手动设置才行.但浏览器用户通常都不会去设置这个.因此让字体不要小于12像素,不然chrome浏览器无法显示

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

3. em和rem的区别

对于汉字来讲,宽高同样,因此font-size高度就是1个em的值(M这个字宽高基本一致,且宽度就是一个汉子的宽度.因此叫em)
区别:
em:本身的font-size的值
rem:根元素的font-size
程序员

4.动态REM

作响应式以前须要四个设计图(没图不作.由于设计不是前端该作的事,没有完整最终肯定的的设计图以前,不要写代码.):
一个是窄屏,一个是宽屏,一个是ipad,一个是手机端的面试

不一样的屏幕获得不一样的样子算式响应式.

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

4.1手机端出现的问题:

pc端只须要选一个布局,而后定宽就能够了,npm

可是手机端,手机太多.

各类宽度像素都有不少.没有办法作响应式,
解决方法:编程

使用百分比:例如,宽度5%,40%,让它始终自适应.
总体缩放:作一个图,而后遇到宽度不同的状况就总体缩放

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

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

若是想写出下面的设计

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

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

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

想要的效果是全部元素按比例放大

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

4.3 最终解决方案

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

因此引入REM方案

在<head>标签里加上以下代码,让1rem等于页面宽度

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>动态REM</title>
  <script>
    var pageWidth = window.innerWidth
     document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
  </script>
  
</head>

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

无论屏幕宽度如何变化,布局老是完美适应屏幕

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的值了。