better2021
commented
4 years ago 媒体查询 移动端适配
移动端加上
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">width=device-width ：表示宽度是设备屏幕的宽度 initial-scale=1.0：表示初始的缩放比例 minimum-scale=1.0：表示最小的缩放比例 maximum-scale=1.0：表示最大的缩放比例 user-scalable=no：表示用户是否可以调整缩放比例
使用link时
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" ><link rel="stylesheet" media="(max-width: 800px)" href="example.css" >直接在style中使用
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--加载meta IE兼容文件-->
<!--[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]-->设置IE默认渲染方式
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:
解决办法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
// 创建元素，设置地址 var script = document.createElement('script'); script.src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"; // 添加到head标签中 document.getElementsByTagName('head')[0].appendChild(script);