HTML&CSS学习 响应式布局@media - MrLee博客 - 一个伪全桟工程师的小站

MrLee博客

落子无悔,人生无返

HTML&CSS学习 响应式布局@media

首先要知道,我们为什么要写自适应的页面(响应式页面)

电脑、平板、手机的屏幕大小是不一样的,在电脑浏览一个PC页面看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,那么如何解决呢,一种方法是再专门为手机定制一个页面,当用户访问的时候,判断设备是手机还是电脑,如果是手机就跳转到相应的手机页面,第二种呢就是一种自适应写法,即一次开发,处处显示!

GIF.gif

CSS3 的@media 查询

定义和使用

使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面,这对调试来说是一个极大的便利。

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

开始写响应式布局时

  1. 设置Meta标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  2. 设置IE渲染方式默认为最高(可选)
    现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8 为了防止这种情况,我们需要下面这段代码来让IE的文档渲染模式永远都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

代码实例

 /*pc*/
       @media screen and (min-width:960px) {
           body {
                background: pink;
           }
       }
/*ipad*/
       @media screen and (min-width: 750px) and (max-width: 960px) {
           body {
               background: blue;
           }
       }

       @media screen and (max-width: 750px) {
           body {
               background: green;
           }
       }
本文共398字

评论卡