给李书记点个赞吧
响应式布局语法结构及用法

响应式布局语法结构及用法

作者:李书记php 时间:2016-06-14 分类:html5+css3 php实战教程 评论:2 条 浏览:2234

媒体查询有两种使用方式, 一种是在CSS样式中内嵌“@media”,在同一个CSS中通过不同窗口编写不同的样式去选择。 另一种是使用外部样式表的引用, 在@import和link中使用“@media”,根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一样的。Media Queries的使用方法如下所示:

@media 设备类型 only (选取条件)  not (选取条件)  and  (设备特性),设备二 { 样式代码 }

在CSS3中的Media Queries模块中支持对外部样式表的引用, 使用方法类型如下代码:

@import url(color.css) screen and (min-width: 1000px);                /*使用@import导入css文件*/

或:

<link rel=”stylesheet” type=”text/css” media=”only screen and (max-width: 480px),only screen and (max-device-width: 480px)” href=”link.css” rel=”external nofollow” />   /*使用link导入外部css文件*/

简写:

<link rel=”stylesheet” type=”text/css” media=”screen and (max-width: 480px)  href=”link.css” />

上面使用中only可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。在样式表中内嵌@media的代码示例如下所示:

@media screen (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px), (max-device-width:480px) and (orientation:landscape), (min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) { 样式代码 }

简写:

@media screen and (max-width:640px)  { 样式代码 }

在上面的示例代码中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,样式代码为兼容设置的样式表,包含在中括号里面。only(限定某种设备,可省略),and(逻辑与),not(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。

  
  1. 张海洋 2016-6-15 11:39 #1 回复TA

    写的很好。加油!学习了。

  2. 张苏宁 2016-6-15 11:37 #2 回复TA

    方法尴尬啊嘎嘎

发表评论

电子邮件地址不会被公开。 必填项已用*标注