利用@media screen实现网页布局的自适应,@media screen and

开始研究响应式web设计,CSS3 Media Queries是入门。
Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
那么,Media Queries是如何工作的?
两种方式:

一种是直接在link中判断设备的尺寸,然后引用不同的css文件:

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

意思是当屏幕的宽度大于等于400px的时候,应用styleA.css
在media属性里:

  • screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
  • and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
  • (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。
1 <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时,应用styleB.css

另一种方式,即是直接写在<style>标签里:

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

写法是前面加@media,其它跟link里的media属性相同。
其实基本上就是样式覆盖~,判断设备,然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。

补充:media query中的not only all等关键字
not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
all: 所有设备,这个应该经常看到
还有其它一些:


media_type


设备类型说明


all


所有设备


aural


听觉设备


braille


点字触觉设备


handled


便携设备,如手机、平板电脑


print


打印预览图等


projection


投影设备


screen


显示器、笔记本、移动端等设备


tty


如打字机或终端等设备


tv


电视机等设备类型


embossed


盲文打印机


以下是demo

一个三栏布局的,在不同的尺寸下,变为两栏,再变为一栏

代码如下:

01 <!DOCTYPE HTML>
02 <html>
03 <head>
04 <meta charset="utf-8">
05 <meta name="viewport" content="width=device-width, initial-scale=1" />
06 <title>css3-media-queries-demo</title>
07 <style>
08 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
09     padding: 0;
10     margin: 0;
11 }
12 .content{
13     zoom:1;
14 }
15 .content:after{
16     content: ".";
17     display: block;
18     height: 0;
19     clear: both;
20     visibility: hidden;
21 }
22 .leftBox, .rightBox{
23     float: left;
24     width: 20%;
25     height: 500px;
26     margin: 5px;
27     background: #ffccf7;
28     display: inline;
29     -webkit-transition: width 1s ease;
30     -moz-transition: width 1s ease;
31     -o-transition: width 1s ease;
32     -ms-transition: width 2s ease;
33     transition: width 1s ease;
34 }
35 .middleBox{
36     float: left;
37     width: 50%;
38     height: 800px;
39     margin: 5px;
40     background: #b1fffc;
41     display: inline;
42     -webkit-transition: width 1s ease;
43     -moz-transition: width 1s ease;
44     -o-transition: width 1s ease;
45     -ms-transition: width 1s ease;
46     transition: width 1s ease;
47 }
48 .rightBox{
49     background: #fffab1;
50 }
51 @media only screen and (min-width: 1024px){
52     .content{
53             width: 1000px;
54             margin: auto
55         }
56 }
57 @media only screen and (min-width: 400px) and (max-width: 1024px){
58     .rightBox{
59         width: 0;
60     }
61     .leftBox{ width: 30%}
62     .middleBox{ width: 65%}
63 }
64 @media only screen and (max-width: 400px){
65     .leftBox, .rightBox, .middleBox{
66         width: 98%;
67         height: 200px;
68     }
69 }
70 </style>
71 </head>
72  
73 <body>
74 <div class="content">
75   <div class="leftBox"></div>
76   <div class="middleBox"></div>
77   <div class="rightBox"></div>
78 </div>
79 </body>
80 </html>
时间: 2024-11-10 01:33:46

利用@media screen实现网页布局的自适应,@media screen and的相关文章

利用@media screen实现网页布局的自适应

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 1280分辨率以上(大于1200px) @media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } 1100分辨率(大于960px,小于1199px) @media scree

实现网页布局的自适应 利用@media screen

利用@media screen实现网页布局的自适应,IE9一下不支持 @media screen /*1280分辨率以上(大于1200px)*/ @media screen and (min-width:1200px){ .p1{color: #f00}; } /*1100分辨率(大于960px,小于1199px)*/ @media screen and (min-width: 960px) and (max-width: 1199px) { .p2{color: #f00}; } /*880分

使用CSS3 Media Queries实现网页自适应

原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性.网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果.接下来会展示如何运用HTML5和CSS3来设计一个自适应网页. 效果预览代码下载 先看看它的效果 在开始

使用CSS3 Media Queries实现网页自适应(转)

当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性.网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果.接下来会展示如何运用HTML5和CSS3来设计一个自适应网页. 效果预览代码下载 先看看它的效果 在开始之前,点击最终预览来看看它的效果.改变浏览器的宽度,你将会看到页面布局会跟着自动改变. 概述 当屏幕分辨

网页布局-左侧固定,右侧自适应

在网页布局中,以前只考虑了两列.三列的布局方式,但是没有过多的去考虑在两列.三列布局的情况下实现某些自适应的情况:今天遇到这个问题,在这里mark一下: 方法一:左侧元素浮动或者绝对定位的方式脱离文档流,让两个块级元素能够在同一行显示.然后margin-left的值设置为左侧元素的宽度:在这里利用了div的一个默认规则,div没有设置宽度的情况下会继承父元素的宽度:如果用p等其他标签达不到此效果: <!doctype html> <html> <head> <me

利用css进行网页布局

网页布局: 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式.传达信息的同时有美感.网页设计特点(相对纸媒来说).特点:1.网页可以自适应宽度2.网页的长度理论上可以无限延长3:页面为:头部,主体部分,底部. 分栏又称为分列:一列布局 二列布局 三列布局 以及混合布局(用的最多),布局通过浮动和定位来完成(实现UI界面效果). 一列布局: body{margin:0;parding:0;}清除默认样式,各个浏览

三栏的网页布局,中间宽度自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

移动端网页布局中需要注意事项以及解决方法总结

移动端网页布局中需要注意事项以及解决方法总结,这份对我们在布局移动端网页的时候非常有用! winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉<meta name="msapplication-tap-highlight" content="no">1.关闭iOS键盘首字母自动大写<input type="text" autocapitalize="off" />2.禁止文本缩放h

响应式布局和自适应布局的不同

学了前端一段时间了,发现大家都搅浑了自适应布局和响应式布局的差别.现在我来和大家说下它们的不同: 自适应的体验   http://m.ctrip.com/html5/响应式的体验   http://segmentfault.com/ 整理了自己查阅的知识点,给各位一些提示. 起初,网页设计者都会涉及固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时本来电脑就少,即使有变化也是800,850,870,880,比如开源中国的网页就是固定宽度为998来定制的,至于为啥是998,我也不知道...