1. 首页
  2. 前端进阶
  3. CSS

愈发熟练的 CSS 技巧

愈发熟练的 CSS 技巧

rem + simple-flexible 适配方案

简单解析

rem 相对于根元素 <html>font-size 的大小来计算坐作为一个单位;

simple-flexible 是根据手淘团队 lib-flexible.js,比较,改写的一个插件,兼容 UC 竖屏转横屏出现的 BUG,自定义视觉设计稿的宽度:designWidth,设定最大宽度:maxWidth

这里有 simple-flexibleGithub 地址,下载下来用即可;

  • 第一个参数是视觉设计稿的宽度,一般视觉设计稿有 750px,可以根据实际调整
  • 第二个参数则是设置制作稿的最大宽度,超过 750px,则以 750px 为最大限制;
  • 使用时候的换算比例,是 1:100, 即 1rem = 100px;

使用步骤

  1. 复制 simple-flexibleflexible.min.jsflexible.js 代码到页面的 <head><script> 标签里面;

  2. 然后视觉设计稿大小,调整里面的最后两个参数值;

  3. 根据设计像素,使用 rem 单位转换的视觉设计稿里面的 px 单位,例: 750px = 7.5rem;

  4. Js中文网 – 前端进阶资源分享(https://www.javascriptc.com/)

优劣

简单实用,基本上没有什么劣势,在 IIS上也已经对最新的 IPheonX 做出了适配方案,建议使用

rem + lib-flexible 适配方案

简单解析

lib-flexible.js 是手淘团队制作的一个 Js 插件,实际上就是能过 JS 来动态改写 <meta> 标签;

lib-flexible.js 基本原理是模拟 vw 把视觉稿分为 100份,以单位 a 来说,1rem = 10a;

以视觉稿 750px 为例子


1a = 7.5px, 1rem = 75px

使用步骤

可以根据上面的步骤,外部引入 CDN 也可以


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <script src="./node_modules/amfe-flexible/index.js"></script>

也可以使用模块化方式

Npm:


npm i -S amfe-flexible

JS:


import 'amfe-flexible' /* do something */

优劣

在 UC 浏览器上发现了,横批竖屏转换不过来的情况,已经找到兼容方案,是通过js在页面的 <head> 里生成定义了 <html> 元素 font-sizestyle 元素来解决!


<style id="rootFontSize">html{font-size: 100px !important;}</style>

而且官方也说明这个是 vw 的过度方案,不建议长期使用;

PostCSS + VW 适配方案

简单解析

PostCSSCSS 变成 JavaScript 的数据,使它变成可操作;

VW 是基于 Viewpost 视窗的长度单位;

Viewpost 是指浏览器可视化的区域,而可视化区域即是 window.innerWidth/window.innerHeight 的大小;

Viewpost 相关的单位有以下四个

  • vw : 是 Viewport width 的简写 1vw = window.innerWidth的 1%;
  • vh : 是 Viewport height 的简写 1vw = window.innerHeight 1%;
  • vmin : vw 和 vh 之间的较小值
  • vmax : vw 和 vh 之间的较大值
  • Js中文网 – 前端进阶资源分享(https://www.javascriptc.com/)

使用步骤

假设视觉设计稿的宽度是 750px 即 1vw = 7.5px,那么就得根据设计图的 px 值来转换 vw单位,为了避免这样的计算,当然就需要使用到 PostCSS ,以及 postcss-px-to-viewport 一个 PostCSS 的插件

本方案使用打包工具构建项目的时候使用是最酸爽的,建议在以下环境下尝试;

有过使用前端脚手架的童鞋,应该都有看到过项目根目录下面都会有一个 .postcssrc 文件,它里面都是一些配置选项比较著名的 autoprefixercssnanopx2remcssnext…等等好玩的配置插件,但是这里不作这些说明,只介绍 postcss-px-to-viewport 配合 vw 使用

Npm:

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容


npm i -S postcss-px-to-viewport

打开 .postcssrc,假定视觉设计稿的宽度为 750px 改写配置如下:


//...Js中文网 - 前端进阶资源分享(https://www.javascriptc.com/) "plugins": { "postcss-px-to-viewport": true }, "rule": { "postcss-px-to-viewport": { "viewportWidth": 750, "viewportHeight": 1334, "unitPrecision": 5, "viewportUnit": "vw", "selectorBlackList": [], "minPixelValue": 1, "mediaQuery": false } } //...

配置完成之后,在项目中直接使用 px ,构建的时候就会自动转换为 vw 单位了,简直不要太爽了;

postcss-px-to-viewport 配置项说明


"viewportWidth" //设置视觉设计稿的宽度 "viewportHeight" //设置视觉设计稿的高度 "unitPrecision": //单位的精度,即保留多少位小数 "viewportUnit": //转换的单位 "selectorBlackList": //需要忽略的选择器 "minPixelValue": //最小像素值 "mediaQuery": //是否允许媒体查询转换为 px

优劣

vw 的兼容性貌似还没那么好,有可能需要做降级处理,需要使用到 CSS Houdini 和 CSS Polyfill 上一些针对 vw 单位做一个降级处理;

vw 在混合使用到 margin 的 px 时候 有可能超出 100vw ,目前使用 padding 来代替 marging 再配置上 box-sizing 可以解决,亦可以使用 css 的 calc() 函数来做一个计算;

转换的时候多少还存在一点像素差,无法完全还原;

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

附加 rem 也不需要计算的装置

在 sublime 上面,有一个插件 cssrem 可以让放手写 px 然后 sublime 自动转换成 rem ,简直可能爱上了 css,

配置说明如下:


px_to_rem // px转rem的单位比例,默认为40,基本定义是视觉设计稿的宽度/10; max_rem_fraction_length // px转rem的小数部分的最大长度,默认为6; available_file_types // 启用此插件的文件类型。默认为:[".css", ".less", ".sass"];

总结

这里总结的三种适配方案本人都有在用,如果说用得最多的应该是第一种了,因为发现的时间比较早,所以用的自然也比较多了;

当然,还有很多本人未知的方案,但是所有的适配方案都是为了完美的还原视觉设计稿,完美解决兼容性问题,当然这都是理想状态;

感谢两位的四篇文章,给我带来的启发

原文链接 愈发熟练的CSS 技巧

链接:https://juejin.im/post/5b0a9f266fb9a07aa114a908

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:愈发熟练的 CSS 技巧

链接:https://www.javascriptc.com/2833.html

« 解密 VS Code 断点调试的原理
React vs Angular vs Vue.js——2019 该选谁?(updated)»

相关推荐

QR code