响应式媒体查询小记

Posted 2020-10-10

首先，允许网页手机模式，并且适配屏幕宽高，并且强制让浏览器以最高的解析模式解析文本（为了避免兼容性不好）

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

在ie9，特别需要引入一下几个js，因为ie9不支持媒体查询，引入几个js，让它支持

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

最后只需要在页面加上media适配样式，判断屏幕大小，引用适当的样式。

手机
<link rel="stylesheet"  media="screen and (max-width: 600px)"  type="text/css"  href="/shop/css/base2.css">
非手机
<link rel="stylesheet"  media="screen and (min-width:601px)"  type="text/css"  href="/shop/css/base.css">

 tips：此种引用样式的模式，适用于已经有了pc版本的网页，然后需要适配做移动版本。

建议：若项目初始，有pc和移动端多种需求的，建议使用bootstrap框架搭建网站。    http://v3.bootcss.com/