@media screen布局响应式的时候要注意

作者：Jasmine - 2018年11月30日

1.设置Meta标签

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

2.加载兼容文件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]-->

3.设置IE渲染方式默认为最高

①为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

或是

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

4.Media用法

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

例如我们想知道现在的移动设备是不是纵向放置的显示屏，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

css写法:

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

!!!注意下顺序

我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面.

来源于： https://blog.csdn.net/inuyasha1121/article/details/50777116

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/617

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！