响应式网站的一些方法

2.语法结构及用法: 

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件)，设备二 {sRules}

(1)在link中使用@media:

 

<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)">

(2)在样式表中内嵌@media：

@media  screen and (min-width: 600px) {
     .one{
        border:1px solid red;
        height:100px;
        width:100px;
     }
    
  }

       通过上面代码可知：它是通过@media媒介查询判断来执行的CSS样式，也就是说：如果我要做一个响应式布局网站，同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式，通过@media媒介查询来完成响应式布局。

值得注意的是：在手机设备上，我们要禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机网站的样式。所以，我们要通过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机网站效果。

禁止代码如下：<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>  加在头部标签里