这两天H5静态页面开辟过程当中的题目总结。
1.viewport – 挪动开辟必需的设置
//内容宽为装备宽度,初始化缩放倍数为1(不缩放)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.rem和px
(1)px是相对于显示器屏幕分辨率而言的相对长度单元。
(2)rem是相对根元素的font-size大小的相对单元,能够做到只修正根元素font-size大小就成比例地调解一切字体大小。
适配:
- 应用媒体查询设置断点来掌握HTML的font-size
html {
font-size:16px;
}
@media (max-width:414px)
{
html {
font-size: 18px;
}
}
@media (max-width:375px) {
html {
font-size: 20px;
}
}
- 依据屏幕大小动态设置html的font-size
var deviceWidth=document.documentElement.clientWidth;
var rootFontSize = deviceWidth / 6.4;
document.documentElement.style.fontSize=rootFontSize + 'px';
3.偕行元素高低位移误差题目
手动设置元素居中,要不然阅读器会随机衬着,必需给它一个衬着划定规矩。
4.元素设置display:inline-block,自动发生间距
处置惩罚:给父元素设置font-size:0; letter-spacing: -4px; 子元素再别的设置font-size和letter-spacing。
5.自适应规划
- 父元素设置display:flex ,子元素flex属性值设置比列。
- 应用百分百(%)规划
6.调试换分辨率装备自动重规划
//orientationchange:装备替换事宜
//onresize:吸收reset事宜时触发的EventHandler
//DOMContentLoaded: 阅读器窗口大小发生变化事宜
(function (doc, win) {
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth=doc.documentElement.clientWidth;
if (!clientWidth) return;
//动态盘算根元素的font-size
doc.documentElement.style.fontSize=(clientWidth / 6.4) + 'px';
};
if (!doc.addEventListener) return;
//监听装备变化
win.addEventListener(resizeEvt, recalc, false);
//监听阅读窗口变化
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
7.总结
H5页面的开辟,由于装备视口大小不一致,在适配上应当充足仔细、严谨。除了自适应的规划以外,更应当注重细节的处置惩罚。