vw + rem + 媒体查询 自适应下高倍屏的兼容
h5 中使用 vw + rem + 媒体查询 实现自适应。设计稿以 iphone 375px 为基准 一般配置
html {
font-size: 100px
}
@media screen and (min-width:375px){
html {
font-size: 100vw / 375 * 100
}
}
针对尺寸手机进行 html 根节点 font-size 的动态设置实现自适应 但是以上只适用于1倍屏与2倍屏,针对目前市面上出现的高倍屏幕,自适应失效 针对以上问题进行特殊处理
@media only screen and (-webkit-device-pixel-ratio: 3) {
html {
font-size: 100vw / 375 * 100 / 0.75
}
}
flex justify-content: space-between; 最后一行向做排列
1、根据结点个数,当此行个数不足时,动态补足空元素占位 2、使用伪类模拟, 父元素不使用 justify-content: space-between; 子元素配置 假设每行子元素个数为 7
&:not(:nth-child(7n)){
margin-right: calc((100% - 宽度 * 7) / 6);
}
ios 输入框被软键盘遮挡的问题
js 处理document.body.scrollTop = document.body.scrollHeight;
background-attachment: fixed; ios 兼容解决, 使用伪类
body:before {
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(path/to/image) center 0 no-repeat;
background-size: cover;
}