css媒体查询实现响应式设计

来源:互联网 时间:1970-01-01

css媒体查询实现响应式设计,有需要的朋友可以参考下。


首先 针对设备优化的页面需要在文档头部加上meta视口元素,视口标签可以告诉浏览器网页的纬度和缩放程度是什么。

为了提供最好的用户体验,移动端的浏览器会按照桌面端的屏幕宽度来渲染页面(通常是980px左右,这个值会根据设备的不同有所浮动),为了更容易地阅读页面,字体会相应的加大,内容也会有所缩放来适应屏幕。对于用户来说,这么做的结果就是页面上的字体可能忽大忽小,还可能需要双击或者捏动缩放屏幕才能看清内容。

<meta name="viewport"content="width=device-width, initial-scale=1.0">用meta视口的width=device-width来控制页面以适应密度无关像素的屏幕的宽度,这样页面就在回流的时候可以适应不同的屏幕尺寸,无论是在小屏幕的移动端或者是大屏幕的桌面端都可以适应

当横屏的时候,有些浏览器会保持页面的宽度不变然后放大屏幕,而不是用回流重新加载出页面。添加initial-scale=1属性,使得无论手持设备的方向是怎么样的,CSS的像素和密度无关像素都是1:1的关系,另外还能让页面占满整个横屏宽度。

媒体查询(Media Queries)是一种可以应用在CSS样式上的简易过滤器,它可以根据设备的渲染特性(包括显示类型、宽度、高度、转向甚至是分辨率)来显示不同的样式。

media queries使用方法

方法一:

引用外部css样式

<link type="text/css" href="styleA.css" media="screen and (min-width:300px);

意思是当屏幕的宽度大于等于300px的时候,应用styleA.css样式

在media属性里:

  • screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
  • and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
  • (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
方法二:

直接写在style标签中

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ .class { background: #ccc; }}
方法三:

使用@import 但是其性能没有前两种方法好

@import url(styleA.css) screen;


实现代码:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 添加initial-scale=1,使得CSS中的像素和密度无关像素的对应关系是1:1的 --> <!-- 添加width=device-width来适应不同的密度无关像素(device independent pixels)时屏幕的宽度。 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式设计</title> <style type="text/css"> .contain{ padding:5px; border:1px solid red; /*width:100%;*/ /*height: 600px;*/ } .row{ border:1px solid green; padding:5px; /*width:1060px;*/ margin:0 auto; } .col{ background-color: #10F999; float:left; width:80px; height: 80px; margin:5px; } /*当视图宽度大于1060px时,一行显示全部的div*/ @media (min-width: 1060px) and (max-width:) { .contain { width:100%; height:120px; } .row{ width:1100px; height:100px; } } /*当视图宽度大于600px时,一行显示6个div*/ @media screen and (min-width: 600px) and (max-width: 1060px) { .contain { width:100%; height:240px; } .row{ width:550px; height:200px; } } /*当视图宽度大于430px时,一行显示4个div*/ @media screen and (min-width: 430px) and (max-width: 600px){ .contain { width:100%; height:360px; } .row{ width:400px; height:300px; } } /*当视图宽度大于300px时,一行显示3个div*/ @media screen and(min-width: 300px) and (max-width: 450px) { .contain { width:100%; height:480px; } .row{ width:280px; height:400px; } } /*当视图宽度大于300px时,一行显示3个div*/ @media screen and (min-width: 200px) and(max-width: 300px) { .contain { width:100%; height:600px; } .row{ width:200px; height:550px; } } </style></head><body> <div class="contain"> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> </div></body></html>


版权声明:本文为博主原创文章,未经博主允许不得转载。



相关阅读:
Top