一套设计稿如何适配不同移动端设备？
开发 WebApp 时，我们通常只会从设计师那边拿到一个尺寸的项目设计图，比如是按照 iphone 6 为基础设计的，因此前端需要让这一套设计稿能够通用在不同的设备型号中，本文介绍的方式是采用 hotcss.js 插件。
hotcss.js会自动根据手机型号计算dpr的值，同时在html根标签内植入一个相应的font-size的值。
hotcss.js 优点
- 保证不同设备下的统一视觉体验。
- 不需要你再手动设置 viewport，根据当前环境计算出最适合的 viewport。
- 支持任意尺寸的设计图，不局限于特定尺寸的设计图。
- 支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
- 提供
px2rem转换方法，CSS 布局，零成本转换，原始值不丢失。 - 有效解决移动端真实 1 像素问题。
px2rem 原理
在 vue-loader 中使用 px2rem 插件，首先安装 px2rem-loader：
npm install px2rem-loader --save-dev
根据设计稿所采用的手机型号（如iPhone 6 或 iPhone X），那么宽度则为 640px 或 750px ，因此先在 chrome 调试工具中获取移动端的 <html> 根元素的 font-size 的值，然后在配置 vue-loader 时将其设为 remUnit 参数的值:
loaders: {
css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',
scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'
}
这样就可以根据设计稿尺寸，在开发时写 CSS 像素的绝对值，即 px 单位，px2rem 会自动将尺寸转换成相应的 rem 单位，结合不同终端生成的不同 html 根元素的字体大小，从而实现一套设计稿在不同设备完美兼容的效果。
Tips
-
对于一些布局类的样式宽度，通常采用百分比为单位，如
width: 100%;又如配合box-sizing: border-box;设置width: 25%;可控制一行放4个div容器。 -
对于一些小组件，如按钮、文字等，直接写设计稿上的 css 尺寸即可。如
font-size,margin,padding,height…… 即使通过 PC 或 Pad 访问也不会丢失效果。 -
响应式开发中，一般需要指定一个
min-width，这样页面尺寸缩小后，避免如按钮里面的文字不会因为外层容器宽度减小而换行。
项目应用
我将之前做的一个项目目录结构和 Webpack 配置文件提取出来，生成一个简易的 WebApp 脚手架，用于实现本文所述的自适应方案。
Github项目地址：基于Vue的WebApp项目构建模板
网友评论