新闻中心

• 运营知识 | 郑州网站建设公司为你讲解响应式 Web 设计–媒体查询

  　　近几年整个社会发生了翻天覆地的变化，各种智能手机，pad，之类的移动端设备随处可见。那么，程序员界就刮起了一阵风暴，大家在思考 “ 如何让我们的网站在各种移动端设备上都能布局合理呢? ”为每一个设备写一套代码自然是非常麻烦的。那么，聪明的程序员们想到了一个办法，“ 我只要一套代码，就能让我的网站在不同大小的设备上正确显示 ”。于是，响应式设计模型诞生啦!其核心就是“媒体查询”技术。

  　　接下来，让我们了解一下，如何实现一个网站的响应式设计

  　　第一、 meta标签

  　　在网页的头部要添加下面一行代码，看下面的参数解释就知道这一行代码的意思了

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

  user-scalable=no">

  　　width=device-width ： 网页宽度等于设备宽度

  　　initial-scale=1.0 ： 初始缩放比例为1.0 。网页初始页面的大小占整个面积的100%

  　　maximum-scale=1.0 ： 最大缩放比例为1.0 ，

  　　user-scalable ： 用户是否可以手动缩放

  　　第二、css语法

  　　实例

  　　如果文档宽度小于 300 像素则修改背景颜色(background-color):

  　　@media screen and (max-width: 300px) {

  　　      body {

  　　            background-color:lightblue;

  　　           }

  　　}

  　　你也可以针对不同的媒体使用不同 stylesheets :

  　　<link rel="stylesheet" href="mystylesheet.css" media="screen and (max-width:300px)">

  　　到这里就可以简单轻松的实现只要一套代码，就能让你的网站在不同大小的设备上正确显示!