css @media认识
2024-10-19 03:35:06
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 > |
最新文章
- Dagger2 使用初步
- FindProcDLL::FindProc 和 KillProcDLL::KillProc,必须使用WPF x86编译出来的程序
- codeforces B. Valera and Contest 解题报告
- AI
- 学习Python前序
- android 无法生成R文件的原因剖析
- Linux入门(10)——Ubuntu16.04使用pip3和pip安装numpy,scipy,matplotlib等第三方库
- python3 中encode 和decode的使用方法。
- vue2.0项目中使用Ueditor富文本编辑器示例
- yum错误,Cannot find a valid baseurl for repo: base 和 No more mirrors to try
- 初识mango DB
- jqurey datatables属性
- Canny算子
- 【Linux】磁盘读写 测试
- Codeforces 584 - A/B/C/D/E - (Done)
- 测试是否支持辨别tex公式
- jsonServer 造个假的服务器传递数据接口 再用axois来请求数据
- 重写TreeView,自定义图标,生成通行的下划线,取消默认获得焦点失去焦点的效果,并支持拖拽节点到外界
- Atcoder:AGC004F Namori
- nova network-vif-plugged 事件分析1
热门文章
- VB6基本数据库应用(五):数据的查找与筛选
- Windows平台Oracle使用USE_SHARED_SOCKET角色
- 基于Android的ELF PLT/GOT符号和重定向过程ELF Hook实现(by 低端农业代码 2014.10.27)
- 控制执行流程——(Java学习笔记三)
- .NET中lock的使用方法及注意事项
- C# 反射技术应用
- JS如何判断包括IE11在内的IE浏览器
- js的逻辑 OR 运算符- ||
- crawler_基础之_java.net.HttpURLConnection 访问网络资源
- Eclipse部署Web项目(图文讲解)