css 媒体查询

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

代码如下：

<link rel="stylesheet" href="./main.css" href="./main.css" media="screen and (min-width: 600px)">
<link rel="stylesheet" type="text/css" href="./main1.css" media="screen and (max-width: 600px)">

如果是屏幕尺寸小于600px会引用main1.css 否则使用main.css

来看看屏幕尺寸小于600px的开发者工具中的效果图

虽然也可以像之前一样在css代码中使用媒体查询 ，但是会显得比较乱。用link的方式会更加直观和方便维护。