rem布局
/*1rem大小的设置,1rem=100px*/
html {
font-size: 80px;
height: auto;
}
@media screen and (min-width: 320px) {
html {
font-size: calc(563% + 10 * (100vw - 320px) / 39);
font-size: calc(90px + 10 * (100vw - 320px) / 39);
}
}
@media screen and (min-width: 375px) {
html {
font-size: calc(625% + 20 * (100vw - 375px) / 39);
font-size: calc(100px + 20 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
font-size: calc(625% + 20 * (100vw - 414px) / 186);
font-size: calc(100px + 20 * (100vw - 414px) / 186);
}
}
@media screen and (min-width: 600px) {
html {
font-size: calc(1000% + 40 * (100vw - 600px) / 425);
font-size: calc(160px + 40 * (100vw - 600px) / 425);
}
}
/*增加这个阶段适配iPad Pro*/
@media screen and (min-width: 1000px) {
html {
font-size: calc(1000% + 40 * (100vw - 600px) / 250);
font-size: calc(160px + 40 * (100vw - 600px) / 250);
}
}
@media screen and (min-width: 2000px) {
html {
font-size: calc(1250% + 60 * (100vw - 1000px) / 1000);
font-size: calc(200px + 60 * (100vw - 1000px) / 1000);
}
}
当在vue项目中有 PC页面 也有 H5页面 的时候
-
不能将这段代码写在全局共用的css里面-
因为会影响pc页面
-
-
也不能写在单独的页面的style里面-
受 scoped 的影响无法生效
-
-
将这段代码写在不受编译的static目录下,并且通过 appendChild 添加元素到微信网页上
let head = document.getElementsByTagName('head')
let meta = document.createElement('meta')
let link = document.createElement('link')
link.href = '/static/static-mobile.css'
link.rel = 'stylesheet'
link.type = 'text/css'
meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no'
head[0].appendChild(meta)
head[0].appendChild(link)
ios若元素有点击事件,点击的时候背景会变灰
需要在css中设置
* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
伪类边框
.box:after{
background: #E5E5E5;
content: "";
height: 1px;
position: absolute;
bottom: 0;
left: 0.15rem;
width: 100%;
}
ios 滑动不流畅
在需要滚动的框元素内增加如下css
.box{
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
addRule 在页面样式表内添加样式
addRule 需要添加之前没有的样式,如果在css中存在的样式则无法修改
// 第一个参数是元素的clsss或者id或者其他,第二个参数是修改的样式
document.styleSheets[0].addRule('.region__title::after', 'left: 10px')
微信网页,动态添加遮罩层,出现后禁止滑动页面
// 在watch监听器中, visible控制弹出框显示隐藏
visible (val) {
let app = document.getElementById(this.targetId)
function bodyScroll (event) {
event.preventDefault()
event.stopPropagation()
}
let child
if (val) {
let div = document.createElement('div')
div.id = 'mask'
app.appendChild(div)
child = document.getElementById('mask')
child.addEventListener('touchmove', bodyScroll)
} else {
child = document.getElementById('mask')
child.parentNode.removeChild(child)
}
}
将事件添加在动态添加的mask元素上,不用removeEventListener移除事件,因为在弹出框消失的时候mask就会被销毁,事件就没啦。