liangyiyiliang的专栏

之前接了一个页面的私活，但是现在突然提出要适配手机。由于之前写的时候是用的px为单位，然后通过postcss 的插件 中的postcss-px-to-viewport 将px全部转为vw 。本身转为vw之后就很好的兼容了很多PC 。但是现在手机上部分样式就乱了，于是就想到了之前用到过的媒体查询（是写在css代码中的），在查阅资料的时候发现居然还有可以加载link标签上的媒体查询。果断使用，特此记录一下。代码如下：<link rel="stylesheet" href="./main.css"

浏览器能显示的最小字体就是12px这是大家都知道的事，之前写大屏的时候就遇到了设计图编写完之后用postcss-px-to-viewport 插件将单位px转为vw。但是有些字就造成比设计图的效果要大，但是实际上字体已经是浏览器最小的了。我们来看效果这三部分都是12px 但是第一部分就因为内容多就换行了后来我看到了css中有一个放缩的功能，类似于放大镜 放小镜上代码<div style="display: flex;width: 500px;"> <div .

根目录下创建一个postcss.config.js 配置文件const path = require('path');module.exports = ({ webpack}) => { const designWidth = webpack.resourcePath.includes(path.join('xxx')) ? 1920 : 1980;//根据路径 输出不同的页面的设计尺寸. 我这里是判断路径是否包含xxx,如果包含就输出1920px宽度的尺寸 return {