移动端适配
- 动态rem方案
html的font-size 为 屏幕宽度 / 10
记得给body写一个font-size:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
let width = document.documentElement.clientWidth
let scale = width / 320
let css = `
html {
font-size: ${320 * scale / 10}px;
}
`
document.write(`<style>${css}</style>`)
</script>
- 1px border 方案
1 获取设备像素比 (不能设置content="width=device-width,否则强制像素比为1)
2 initial scale = 1 / 像素比 (缩放整体)
3 rem方案为 rem*像素比 (元素扩大)
4 使用1px
<script>
let scale * 1 / window.devicePixeRatio
document.write(`
<meta name="viewport" content="${scale}, user-scalable=no, maximum-scale=${scale}, minimum-scale=${scale}">
`)
</script>
<script>
let width = document.documentElement.clientWidth / window.devicePixelRatio
let css = `
html {
font-size: ${width * scale / 10 * window.devicePixelRatio}px;
}
`
document.write(`<style>${css}</style>`)
</script>
scss函数
@function rem($px){
$remSize: $px / 320 * 10;
@return #{remSize}rem;
}
body {
font-size: rem(16);
margin: 0;
}
字体兼容
移动端
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
pc端(含Mac)项目：
font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;
移动和pc端项目：
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;
