HTML/CSS: 媒体查询
来源:互联网 发布:mac打开文件夹很慢 编辑:程序博客网 时间:2024/04/30 23:32
1.INTRODUCTION
之前写过一篇关于媒体查询的博文:HTML/CSS: 通过媒体查询增加网页在设备上的兼容性。如今对媒体查询有了更深一步的了解,故这篇博文是对之前文章的补充。
在媒体查询出现之前,为适应移动设备浏览网页,网站开发者通常会开发方便移动设备访问的版本,但这通常需要大量的开发,必须建立一个子域,使用不同于父站点的样式表和HTML模板,图片也不得不重新调整大小以更好的适应小的屏幕。另外还需要创建脚本,检测用户是否使用了移动浏览器,然后重定向到相应的移动站点上。
但在媒体查询出现以后,就省下了不少麻烦:首先,他们会基于设备的属性来检测设备,这样就不需要使用浏览器探测脚本,之后允许直接安装设备的功能去设定目标样式表。
媒体查询的主要语法有三种:
// 第一种<link href="file" rel="stylesheet" media="logic media and (expression)">// 第二种@import url('file') logic media and (expression);// 第三种@media logic media and (expression) {rules}
2.FEATURE
(1)浏览器窗口宽度与高度
width, min-width, max-width
height, min-height, max-height
// eg.@media media and (max-width:480px) { rules }
主要作用:根据浏览器窗口的大小设置不同的样式
(2)设备的宽度与高度
device-width, min-device-width, max-device-width
device-height, min-device-height, max-device-height
// eg.@media media and (max-device-width:480px) { rules }
主要作用:根据设备屏幕的大小设置不同的样式
(3)方向
orientation:value value: landscape, portrait
@media media and (orientation: value) {rules}
landscape:浏览器的宽度大于高度时应用;
portrait:浏览器的宽度小于高度时应用;
主要作用:实现屏幕内容旋转(智能手机,平板电脑)
(4)高宽比
aspect-ratio
device-aspect-ratio
@media media and (aspect-ratio: horizontal/vertical) {rules}@media media and (device-aspect-ratio:horizontal/vertical) {rules}
主要作用:根据设备的高宽比设置样式
(5)像素比
-webkit-device-pixel-ratio
-webkit-max-device-pixel-ratio
-webkit-min-device-pixel-ratio
@media media and (-webkit-device-pixel-ratio:number) {rules}@media media and (-webkit-max-device-pixel-ratio) {rules}@media media and (-webkit-min-device-pixel-ratio) {rules}
主要作用:根据屏幕像素比设置样式。
(6)多种媒体特征
and , ‘,’
@media logic media and (expression) and (expression) {rules}@media logic media and (expression), media and (expression) {rules}
(7)logic
logic: only, not
@media logic media and (expression)
对于不支持该语法的浏览器隐藏规则,使用only;
对于不满足设置参数的浏览器应用规则,使用not。
以上内容皆为本人观点,欢迎大家提出批评和指导,我们一起探讨!
- HTML/CSS: 媒体查询
- HTML+CSS编写静态网站-37 媒体查询初探
- CSS媒体查询
- CSS媒体查询
- CSS媒体查询
- CSS媒体查询器
- CSS 媒体查询
- CSS知识点:媒体查询
- CSS媒体查询
- CSS Media媒体查询
- CSS Media媒体查询
- css媒体查询 @media
- css 媒体查询
- css的媒体查询
- html 媒体查询
- css媒体查询之width
- css媒体查询之height
- HTML/CSS: 通过媒体查询增加网页在设备上的兼容性
- 90. Subsets II
- 【数据结构】算法7.12 AOV-网 拓扑排序
- 谷歌(google)世界各国网址大全世界各国google网址
- MongoDB的安装与配置
- IOS基础知识记录四(Master-Detail Application)
- HTML/CSS: 媒体查询
- IOS基础知识记录五(简单手电筒)
- @RequestParam 同名参数的处理
- IOS基础知识记录六(读写文件)
- STM32系列选型指南
- IOS基础知识记录七(iphone手机横屏、竖屏)
- 从头开始创建django项目和链接postgreSQL
- 欢迎使用CSDN-markdown编辑器
- n皇后问题