css3媒体查询实现网站响应式布局

2757

在写响应式中页面中先加载:

//在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
content属性值 :
     width:可视区域的宽度,值可为数字或关键词device-width
     height:同width
     intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,
              maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
     user-scalable:是否可对页面进行缩放,no 禁止缩放
<!-- 移动设备支持@Begin -->
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 苹果设备的全屏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!--默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)-->
<!-- 移动设备支持@end -->


一、在 <head> 链接CSS文件时提供判断语句,选择性加载不同的CSS文件

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

二、在CSS文件中分段书写不同设备的代码

  1. /* CSS Code */  

  2. @media screen and (min-width: 600px) and (max-width:1200ox) { /* CSS Code */ }  

  3. @media screen and (max-width: 599px) { /* CSS Code */ }  

三、媒体介质类型

CSS3中提供了多种媒体介质类型,虽然常用的就俩……注意媒体类型名称区分大小写,并且尽管有些介质类型有重合,但是一个平台只会有一种介质类型。(我猜这个标准很多浏览器不会遵守吧?)

  1. all – 全部媒体类型

  2. braille – 盲文触摸装置

  3. embossed – 分页盲文打印机 (W3C的无障碍做的真细心……)

  4. handheld – 小屏幕和流量有限的手持设备(注意!安装标准来说移动设备都应该使用这个介质类型,但是实际上安卓根本不理会这个介质,请使用 screen 结合媒体查询语句使用)

  5. print – 提供给打印机的样式,最常用的介质类型,打印页面时获得适合阅读的效果

  6. projection – 投影,给投影机使用(有人用?)

  7. screen – 彩色屏幕,最常用的介质类型,一般和屏幕大小表达式联合使用

  8. speech – 语音朗诵,用于屏幕阅读软件(和将来的Siri?)

  9. tty – 固定间距字符网格,例如功能机那样的

  10. tv – 智能电视设备(唔不知道我家的创维酷开支持如何……)