手机网页css字体,CSS深入浅出-动态REM(手机专用)

动态REM是手机专用的自适应方案

REM的值

1. CSS有很多长度单位

px 像素

em 一个"M"的宽度(一个汉字的宽度)

ex 一个"X"的高度

vh(viewport height) 视口高度

100vh == 视口高度

vw(viewport width) 视口宽度

100vw == 视口宽度

rem(root em) 根元素的font-size值

......

没错，REM就是根元素()的font-size的值

但要讲动态REM，就得再普及几个概念。

2. Chrome12像素法则

Chrome浏览器如果不调设置的话，默认的最小字号是12px

也就是说，Chrome不设置的话。html网页是无法在Chrome上显示比12px还要小的字体的，如果有，均已12px显示

3. 网页默认字体大小

根元素()的默认font-size是16px

综上所述，在默认情况下，1rem = 16px

手机端方案

1. 方案抉择

响应式?

虽然手机端的宽度都在300~500之间，但如果用了响应式，适配各种高机型会变得非常费时费力，而且图是大问题。

百分比布局(自适应宽度等)

百分比布局的宽度可以解决，但是高度怎么办？而且你都不知道宽度确切的值，所以也很难把高度和宽度关联起来。

整体缩放

保证了在各个机型上显示的比例

我觉得可以～

2. 整体缩放(动态REM)

其实使用vw作为尺寸单位最好，但是兼容性太差

所以我们选择rem作尺寸单位

动态REM主要利用了rem = html:font-size = viewportWidth

动态REM

动态REM主要利用了rem = html:font-size = viewportWidth

1. 利用JS动态调整REM

/*告诉浏览器页面别缩放*/

var pageWidth = window.innerWidth

/*浏览器当前页面宽度*/

document.write('')

/*把浏览器当前页面宽度写入的font-size中*/

接下来就可以用rem的值了

2. CSS代码(测试效果)

div{

width:0.5rem;/*宽度:页面宽度的1/2*/

height:0.5rem;/*高度:页面宽度的1/2*/

margin:0.25rem auto;/*上下边距:页面宽度的1/4*/

}

特点&解决方案

1. REM可以和其他单位同时存在

div{

font-size: 16px;

border: 1px solid red;

width: 0.5rem;

}

2. 单位转换问题

所有rem都是小数，看起来眼花缭乱

不如把pageWidth改成pageWidth/100，但其实是不行的，因为Chrome默认最小font-size是12px

退而求其次，改成pageWidth/10，然后再把相应宽度*10就行了

3. 使用SCSS

使用SCSS可以写个函数，方便的将设计稿里的尺寸单位px直接转换成rem相应的值

安装SCSS(命令行)

$ npm config set registry [https://registry.npm.taobao.org/](https://registry.npm.taobao.org/ "null")

$ touch ~/.bashrc

$ echo 'export SASS_BINARY_SITE="[https://npm.taobao.org/mirrors/node-sass"'](https://npm.taobao.org/mirrors/node-sass%22' "null") >> ~/.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

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

在 scss 文件里添加

@function px/*左边是名称，可改*/( $px ){

@return $px/$designWidth*10 + rem;

/*以实际像素值➗当前页面宽度✖️rem的转换率 再加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;

}

完～累死了