移动适配
移动适配指的是在屏幕宽度不同时,网页元素尺寸不同(等比缩放)
1. rem
rem
单位是相对单位,是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
例如在HTML字号大小为20px时,box盒子的宽度为5_20=100px,高度为3_20=60px
/* 1rem = 1html标签字号大小 */
html {
font-size: 20px;
}
.box {
width: 5rem;
height: 3rem;
background-color: pink;
}
媒体查询
媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式。当某个条件成立, 执行对应的CSS样式
用途:手机屏幕大小不同,分辨率不同,设置不同的HTML标签字号
一般来说,目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10。也就是对于320px宽的屏幕,rem应该为32px
/* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
@media (width:320px) {
html {
font-size: 32px;
}
}
@media (width:375px) {
html {
font-size: 37.5px;
}
}
@media (width:414px) {
html {
font-size: 41.4px;
}
}
flexiable.js
flexible.js
是手淘开发出的一个用来适配移动端的js框架, 其核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。 从而为了避免为每个屏幕宽度写一个媒体查询
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
在html中引入
<script src="../js/flexible.js"></script>
适配
书写代码时,所有的尺寸都是rem单位,而不是具体的像素值。
- 查看设计稿宽度,确定参考设备宽度(视口宽度) ,例如375px。
- 确定基准根字号(1/10视口宽度)37.5
rem单位的尺寸 = px单位数值 / 基准根字号
,例如 N = 68 / 37.5
2. vm/vh
使用vw/vh
单位设置网页元素的尺寸,其也是相对单位
- vw是viewport width,
1vw = 1/100视口宽度
- vh是viewport height,
1vh = 1/100视口高度
开发中,一般不会在一个盒子中混用vw和vh。因为 vh是1/100视口高度,全面屏视口高度尺寸大,如果混用可能会导致盒子变形。
与rem适配对比,其优点是简单、不需要引入flexible.js