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

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

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

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

1.REM是什么

CSS9:动态 REM-手机专用的自适应方案
em:一个m的宽度.如果面试官问,就说是一个汉字的宽度.这个单位是相对于font-size的

rem:root em,根元素的font-size.即<html>的font-size.rem是相对于htmlfont-size
CSS9:动态 REM-手机专用的自适应方案
vh:视口高度,总共100vh
vw:视口宽度,总共100cw
MDN-length

2. 12像素法则

网页的默认font-size是16px.
chrome浏览器默认设置能显示的最小字体是12px,也就是说如果给css样式小于12px,那么还会显示12px.这需要手动设置才行.但浏览器用户一般都不会去设置这个.所以让字体不要小于12像素,否则chrome浏览器没法显示
CSS9:动态 REM-手机专用的自适应方案
而firefox和safir浏览器就没有这个限制

3. em和rem的区别

对于汉字来说,宽高一样,所以font-size高度就是1个em的值(M这个字宽高基本一致,且宽度就是一个汉子的宽度.所以叫em)
区别:
em:自己的font-size的值
rem:根元素的font-size
CSS9:动态 REM-手机专用的自适应方案

4.动态REM

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

不同的屏幕得到不同的样子算式响应式.
CSS9:动态 REM-手机专用的自适应方案
这篇博客不讨论响应式.只看手机端怎么做.

4.1手机端出现的问题:

CSS9:动态 REM-手机专用的自适应方案
pc端只需要选一个布局,然后定宽就可以了,

但是手机端,手机太多.
CSS9:动态 REM-手机专用的自适应方案
各种宽度像素都有很多.没有办法做响应式,
解决方法:

  1. 使用百分比:例如,宽度5%,40%,让它始终自适应.
  2. 整体缩放:做一个图,然后遇到宽度不一样的情况就整体缩放

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

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

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

如果想写出下面的设计
CSS9:动态 REM-手机专用的自适应方案

假设固定宽度为320px,固定宽高后出现的问题:
CSS9:动态 REM-手机专用的自适应方案
即如果手机宽度变化,那么就不会适应屏幕变化
CSS9:动态 REM-手机专用的自适应方案
如果居中,两侧就会变大,固定宽度只能让别的宽度的手机看到320px宽度的样子

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

CSS9:动态 REM-手机专用的自适应方案
单位应该相对于宽度,才能很好地还原设计稿
px,em都不行,vw可以,但是vw兼容性太差
所以退而求其次

4.3 最终解决方案

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

CSS9:动态 REM-手机专用的自适应方案
所以引入REM方案
CSS9:动态 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>

使用上面代码,使长度单位相对于页面宽度定义,从而适应任何不同屏幕尺寸的手机
CSS9:动态 REM-手机专用的自适应方案

不管屏幕宽度如何变化,布局总是完美适应屏幕
CSS9:动态 REM-手机专用的自适应方案

4.4优化

  1. rem小于1不方便写
    将pageWidth/100,于是就将款入分为100rem,刚才的0.4rem就可以写成40rem.这样用起来像vw.但是有一个问题
    CSS9:动态 REM-手机专用的自适应方案
    谷歌浏览器字体设置不能小于12px,所以除以100后,html标签的font-size变成了12px.
    解决方法:之缩小10倍即可,10rem为页面总宽度
    CSS9:动态 REM-手机专用的自适应方案
  2. rem和其他长度单位混用
    CSS9:动态 REM-手机专用的自适应方案
    因为border这种小的单位,让它固定就可以,不需要缩放,因为1px缩放,border还显示1px.如果5px缩放,不显示2.5px,值显示2px,px不会变成小数.
    font-size也不必缩放,将所有屏幕的手机font-size设置成一样大小,显示不影响美观

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

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

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

CSS9:动态 REM-手机专用的自适应方案
一定要强制自己用命令行,强制自己学英语,强制自己看文档。
只有这三条都做了,才有可能成为前端水平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 文件
CSS9:动态 REM-手机专用的自适应方案
例如,在style.scss里写

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

在css里没有这样的语法
这时观察css文件
CSS9:动态 REM-手机专用的自适应方案
自动转化成符合正确语法的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的值了。

上一篇:cocos2d-x系列笔记技巧篇(2)---关于CREATE_FUNC宏的用法


下一篇:win10 自动亮度关闭无效问题