HTML/CSS: 通过媒体查询增加网页在设备上的兼容性
来源:互联网 发布:mac怎么连接airplay 编辑:程序博客网 时间:2024/05/21 06:41
我们知道,HTML决定了网页的内容结构,css样式表决定了网页的外观,也就是样式。对于一个简单的网站,其外观可能是多张样式表叠加而成的。那为什么不合为一张总的css样式表呢?
原因是网页制作者一般会将其中一个样式表作为网页的基本样式,然后通过链接新的样式表来达到页面改进的效果。这样做非常的方便,即不会影响原来基础样式的代码,又能在其基础上进一步的改进,这是十分方便的。
使用多个样式表还有另一个原因,便是针对不同的设备,我们可以采用不同的样式表,以达到页面兼容各种设备的目的。比如桌面PC, 笔记本电脑, 平板电脑, 手机甚至是页面的印刷版本。要做到这一点,可以利用<link>
的media属性,也就是媒体查询。
如:
<!--css1--><link href="index-mobile.css" type="text/css" rel="stylesheet" media = "screen and (max-device-width: 480px)"><!--css2--><link href="index-print.css" type="text/css" rel="stylesheet" media="print">
对于css1样式表,其媒体查询的对象是有屏幕的设备且屏幕的宽度不超过480px;
对于css2样式表,其媒体查询的对象是打印机。
对于媒体查询,还有另一种设置的方法,就是在css中设置,利用@media规则。
@media screen and (min-device-width: 481px) { #guarantee { margin-right: 250px; }}@media screen and (max-device-width: 480px) { #guarantee { margin-right: 30px; }}@media print { #guarantee { font-family: Times, "Times New Roman", serif; }}
这里有一点需要说明一下, min-device-width:481px是指屏幕宽度大于**481px的设备,max-device-width:480px是指屏幕宽度小于或等于**480px的设备。
而且,min-width与min-device-width还是有点区别:min-width是指浏览器的宽度,min-device是指设备的屏幕宽度。
所以有了@media,我们就可以不必重复规则,这也是很方便的。
以上内容皆为本人观点,欢迎大家提出批评和指导,我们一起探讨!
0 0
- HTML/CSS: 通过媒体查询增加网页在设备上的兼容性
- HTML/CSS: 媒体查询
- 移动设备上的媒体查询 CSS media queries for mobile device
- css的媒体查询
- css在ios和android设备上的兼容性问题(移动设备不同内核浏览器样式兼容性)笔记
- css在ios和android设备上的兼容性问题(移动设备不同内核浏览器样式兼容性)笔记
- Android 系列 1.10通过兼容性库在旧设备上使用新功能
- 通过css的@font-face属性,在网页上显示用户电脑没有的字体。
- 报错解决/简单媒体查询/动态加载css/横竖屏判断/html浏览器兼容性meta设置等小问题小知识
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
- 各种移动设备的媒体查询
- 在你的网页上增加RSS订阅功能
- HTML+CSS编写静态网站-37 媒体查询初探
- CSS引用鲜为人知的媒体查询
- html+css兼容性要点
- CSS媒体查询
- CSS媒体查询
- CSS媒体查询
- JSP习题之九九乘法表,输出时间和问候
- Mac下使用Android Studio出现“install JDK 1.8”版本问题
- Android Studio开发JNI工程
- 算法导论学习笔记(五)计算机几何之最近点对
- 常用数据结构图--拓扑排序
- HTML/CSS: 通过媒体查询增加网页在设备上的兼容性
- 建立Java Web Project并进行JDBC操作
- 电影
- 迷宫求解——附栈的实现
- 这一年的学习/科研生涯回顾(非纯技术文)
- 基于监听的事件处理机制-----五种onClickListener实现方法
- 生产者消费者问题
- JAVA进阶2.3——用throws处理异常
- Mysql必知必会(笔记)【基本概念,检索,过滤】