目录
1、px 为像素单位
px是常用的像素单位,一般多用于PC端网页开发,直接使用书写
前端人员拿到的设计稿一般也是px单位,后续根据需求进行单位换算
2、rem
在移动端开发时,常会因为手机屏幕大小不同,分辨率不同,出现如何设置html标签字号的问题
2.1 视口:开发屏幕大小
为解决这个问题,产生了rem布局,将网页均分为10等份,html标签字号 为视口宽度1/10,以根字号 为参考标准
2.2媒体查询
不同的分辨率有不同的根字号,需要进行媒体查询,代码示例如下
但一般情况下,不使用此方式进行正常开发,每次进行手动查询很麻烦
现在都使用flexble.js配合人实现在不同宽度设备中,网页元素尺寸等比缩放问题
- flexble.js是手淘开发的一个用来适配移动端的JS框架
- 核心原理是根据不同的视口宽度给网页中的html根节点设置不同的font-size
引入方式
flexble.js源代码
(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))
3.em
em和rem类似,都是依据font-size进行页面布局缩放,但是em多依赖于直接亲父级font-size的大小,只会找最近的父级,不直接依赖于整体的html根标签
4、vw,vh是相对视口尺寸的计算结果
vw: viewport width 1vw=1/100视口宽度
vh: viewport hight 1vw=1/100视口高度
3.1口:vw大小
一般而言,移动端开发多依据于iPhoneone6/7/8大小进行开发
例如以上视口宽度,1vw=3.75px,1vh=6.67px
实际开发中一般不使用vh进行开发,移动端屏幕宽度相对比较固定大小,而高度则因手机型号变化而变化比较大
3.2 实际举例(iPhoneone6/7/8视口)
盒子实际大小
box 宽度: 50vw × 3.75px=160px
box高度:30vw ×3.75px=96px
提醒:less里面进行换算只可使用一种单位,否则以前面单位为准,此地使用两种仅为演示效果
5、各大单位浏览器兼容效果
检查网站:Can I use... Support tables for HTML5, CSS3, etchttps://caniuse.com/
rem为例