在手机端将网页转换成html,用rem编写移动端自适应网页

rem与px 的换算

计算公式: 元素的宽度(或高度) / html元素(跟标签)的font-size = rem;

举例 元素的宽度是 200px, html的font-size是100px, 那么元素宽度的rem大小 = 200/100 = 2rem

移动端自适应网页的编写

自适应: 当屏幕的像素变大的时候,字体和元素也响应变大

什么是视口: 移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域

代码如下

Document

// 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变

html {

font-size: 100px;

}

body {

font-size: 16px;

}

h1 {

font-size: 0.12rem;

}

// 试试手机为ip6plus和ip5时,div的宽高各是多少(px)

div {

width: 1rem;

height: 1rem;

background: gray;

line-height: 1rem;

}

function resetWidth() {

// 兼容ie浏览器 document.body.clientWidth

var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;

console.log(baseWidth);

// 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整

document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'

}

resetWidth();

window.addEventListener('resize', function () {

resetWidth();

})

内容

postcss-pxtorem 像素自动转换成rem

习惯了写px，所以也希望我在写px的时候能够主动转换成rem，使用 postcss-pxtorem就能实现我们的愿望

安装postcss-pxtorem

npm i postcss-pxtorem --save-dev

打开项目根目录下的package.json，在postcss的plugins里添加下面的代码

"postcss-pxtorem": {

"rootValue": 100,

"propList": [

"*"

]

}

image.png