使用CSS3的@media来实现网页自适应
如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。
作为web前端开发人员需要知道并且会用这种知识。
css2的@media
css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS。
语法: @media sMedia { sRules }
说明:
sMedia : 指定设备名称。请参阅附录:设备类型
sRules : 样式表定义
指定样式表规则用于指定的设备类型。请参阅link对象的media属性(特性)。
示例:
1
2
3
4
5
6
7
8
9
|
// 设置显示器用字体尺寸 @media screen { BODY { font-size : 12pt ; } } // 设置打印机用字体尺寸 @media print { @import "print.css" BODY { font-size : 8pt ;} } |
css3的@media
@media 属性在CSS3里面已经演变成一种 media queries(媒体查询/匹配)了,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。
语法:@media : { sRules }
取值:
1
2
|
<sMedia>:指定设备名称。 {sRules}:样式表定义。 |
说明:
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等).
01
02
03
04
05
06
07
08
09
10
11
12
13
|
media_query: [only | not]? [ and ]* expression: ( [: ]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid |
解析
media_query:媒体查询条件。包括了 only not and 这些经常在程序里面出现的逻辑判断。
expression:表达式。媒体特征的匹配与否。
media_type:媒体的种类。包括了很多。
media_feature:媒体的特征。常用的是 min-width max-width 最小最大宽度的判断。
DEMO(推荐在Chrome或者FIREFOX下打开,打开后,按快捷键“CTRL”+”+”,“CTRL”+”-”来缩放页面):
CSS代码
1
2
3
4
5
|
body{ background : blue ;} /*宽度500px-800px之间+高度100px-400px之间 蓝色*/ @media screen and ( max-width : 500px ){body{ background : green ;}} /*宽度小于500px时 绿色*/ @media screen and ( min-width : 800px ){body{ background : red ;}} /*宽度大于800px时 红色*/ @media screen and ( max-height : 100px ){body{ background :yellow;}} /*高度小于100px时 黄色*/ @media screen and ( min-height : 400px ){body{ background :pink;}} /*高度大于400px时 粉色*/ |
HTML代码
1
2
3
4
5
6
|
< p >效果演示,请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下:</ p > < p >/*宽度500px-800px之间+高度100px-400px之间 蓝色*/</ p > < p >/*宽度小于500px时 绿色*/</ p > < p >/*宽度大于800px时 红色*/</ p > < p >/*高度小于100px时 黄色*/</ p > < p >/*高度大于400px时 粉色*/</ p > |
demo演示地址:http://www.zjgsq.com/example?pid=1180
使用CSS3的@media来实现网页自适应的更多相关文章
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
- 使用CSS3 Media Queries实现网页自适应(转)
当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设 ...
- 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
- @media实现网页自适应中的几个关键分辨率
不同分辨率设备或不同窗口大小下网页布局经常是不同的,一不小心就会发生错位.可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题.到底分辨率是多少的时候设置呢?首先 ...
- [转]运用@media实现网页自适应中的几个关键分辨率
转自百度经验:http://jingyan.baidu.com/article/6f2f55a1ab36c3b5b83e6c46.html 经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用 ...
- css -- 运用@media实现网页自适应中的几个关键分辨率
经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,但是怎样兼容所有主流设备就成了问题.到底分辨率是多少的时候设置呢? 先看下面的代码,这是从b ...
- 使用CSS3的@media来编写响应式的页面
首先要知道,我们为什么要写自适应的页面(响应式页面) [直接看干货] 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱 ...
- CSS3 之 Media(媒体查询器)
1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...
- 控制页面打印的2种方法(css3的media媒体查询和window.print())
在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...
随机推荐
- 洛谷P1938 找工就业
传送门啦 这个题本质就是跑一边最长路,重点就是在怎么建图上. 我们可以把点权放到边权上面,即将每一个边的终点点权当做这个边的边权,这个题里就是将工钱 $ d $ 当做边权. 如果这一条边需要坐飞机才能 ...
- linux内核之accept实现
用户态对accept的标准用法: if ((client_fd = accept(sockfd, (struct sockaddr *)&remote_addr, &sin_size) ...
- C++11之auto和decltype
auto自动类型推断,用于从初始表达式中推断出变量的类型. auto a;// 错误,没有初始化表达式,无法推断出a的类型 autoint a =10;// 错误,auto临时变量的语义在C++ 11 ...
- plsql中做计划任务
第一步: 1. 打开PLSQL后,选择节点jobs,右键新建,弹出界面后再what值中填写需要做计划的存储名加分号结束,如门诊收入存储PH_ClinicIncome(1):其中1代表医疗机构代码 间 ...
- MySQL 连接本地数据库、远程数据库命令
一.MySQL 连接本地数据库,用户名为“root”,密码“123”(注意:“-p”和“123” 之间不能有空格) C:/>mysql -h localhost -u root -p123 二. ...
- 手工增加Mapping
[root@es ~]# curl -H "Content-Type:application/json" -XPOST "http://127.0.0.1:9200/t_ ...
- JAVA类课后练习
1.Pg168--2 package com.hanqi; import java.util.Scanner; public class Rectangle { Rectangle() { //完成初 ...
- 关键字final和override
final关键字 限制某个类或结构体不能被继承 直接对类声明: class A final{}; class B : public A {}; 或这类内有final函数,类可以被继承,但是final函 ...
- 【LOJ】#2105. 「TJOI2015」概率论
题解 可以说是什么找规律好题了 但是要推生成函数,非常神奇-- 任何的一切都可以用\(n^2\)dp说起 我们所求即是 所有树的叶子总数/所有树的方案数 我们可以列出一个递推式,设\(g(x)\)为\ ...
- STM32 串口通信
1. 中断说明 TXE(Tansmit Data Register empty interrupt) - 发送数据寄存器空,产生中断.当使能TXE后,只要Tx DR空了,就会产生中断.---写寄存器D ...