1. 移动端适配
1.1 vue-rem适配:
设计稿:750尺寸 是 iPhone6/7/8 屏幕宽度的 2倍视图
第一步,先用vue-cli快速构建出一个项目,然后,安装postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url;
npm i --save postcss postcss-pxtorem postcss-loader postcss-import postcss-url
第二步,在项目根目录下添加.postcssrc.js文件,在里面写上
module.exports = {
plugins: {
'postcss-pxtorem':
{
rootValue: 32,//根目录的字体大小是32px
propList: ['*'],
minPixelValue: 2//最小转换单位是2px
}
}
};
第三步,动态设置根字体大小!一段简单的js插入在head里面; public里面的index.html
<script>
(function() {
function autoRootFontSize() {
document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
// 取screen.width和document.documentElement.getBoundingClientRect().width的最小值;除以750,乘以32;懂的起撒,就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化!是不是很简单
}
window.addEventListener('resize', autoRootFontSize);
autoRootFontSize();
})();
</script>
可能遇到的问题:
Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
这里降低 postcss-pxtorem@5.1.1
npm i postcss-pxtorem@5.1.1
再次运行npm run serve 就可以了
1.2 响应式布局:媒体查询(media query)
媒体查询就是对设备按照某些条件进行查询,使符合查询条件的设备显示对应的样式,从而达到不同设备显示不同样式的效果。
• 响应式页面的本质就是写了两个页面的内容(移动端+PC端)在同一个页面中,然后根据查询条件来切换该用哪个页面。
• 如果是同一个页面内之间的状态,用JS来切换状态
如果是不同屏幕之间的状态,用媒体查询来切换状态
• 适配移动端用 媒体查询 & meta viewport
• 移动端页面的交互方式和 PC 端页面不同
<style>
@media (max-width: 320px){ /*0~320*/
body{
background: pink;
}
}
@media (min-width: 321px) and (max-width: 375px){ /*321~768*/
body{
background: red;
}
}
@media (min-width: 376px) and (max-width: 425px){ /*376~425*/
body{
background: yellow;
}
}
@media (min-width: 426px) and (max-width: 768px){ /*426~768*/
body{
background: blue;
}
}
@media (min-width: 769px){ /*769~+∞*/
body{
background: green;
}
}
</style>