上一篇我们介绍了Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了。 在上一篇中,我们提到Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成。 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援。 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义。
关于Media Queries
到底什么是Media Queries ? 一般我们在开发HTML + CSS 网页中,都会有一份CSS 来控制网页的样式表。 而随着各式各样不同大小、长宽与解析度的装置的兴起,我们在开发网页只考虑到自己的萤幕显示的如何,是多么的肤浅哪。 So,在开发者的萤幕看到的网页或许很漂亮,那,其他人的萤幕呢? 所以,我们需要的是能够控制不同大小的萤幕(装置),在其上所显示出来的样式,让各式各样来自不同地方的User 都能够有最佳的浏览体验。
- 出生年代:CSS3
- 支援状况:除IE8以下不支援外,其余较新款浏览器接皆支援(详细支援状况: http://caniuse.com/css-mediaqueries )
较佳的开发步骤:
- 先写一份在你的萤幕显示OK 的CSS 样式。
- 开始使用Media Queries 在不同装置上做调整。
你可以先看例子
在国外有一个网站专门搜集各式各样的Media Queries效果,网站名称就叫做「 Media Queries 」,网址: http://mediaqueri.es/ 。 进到该网站之后,你会看到每一列都有4 张网站的截图,从左开始是萤幕宽度较小的行动装置,一直到右边则是在传统PC 的较大萤幕上。 而在传统PC 中,会将许多元素并排;在手机中,会变成只有一行。
Media Queries 怎么写
Media Queries 其实说简单也很简单,你可以只使用下面的几行CSS,再针对不同装置去设CSS 属性就好了。 这个段落将由浅入深,从最简单、最Easy、最没挑战性的使用宽度来玩。
Media Queries 有两种使用方法
- 在同一个CSS 档案中,用Media Queries @media 来判断使用者之萤幕宽度,选择载入哪一段CSS。
- 在HTML 的<link> 载入的地方,用media 属性判断使用者之装置/ 视窗宽度,选择载入哪一个CSS 档案。
以上两种则一即可,使用第一种的话要写好几遍<link> 标签,另一种要在同一个CSS 档案中写好几遍@media。 效果相同,选择自己喜欢的方式即可。 (网路上的Framework 都是第1种,如Bootstrap。)
@media 用宽度( width ) 判断
下面的语法,是最常用到的Media Queries:(下方为同一档案之内容)
//全部的使用者都會載入這裡的 CSS。 @media screen and (min-width: 1200px) { // 如果使用者之視窗寬度 >= 1200px,將會再載入這裡的 CSS。 } @media screen and (min-width: 768px) and (max-width: 979px) { // 如果使用者之視窗寬度介於 768px ~ 979px,將會再載入這裡的 CSS。 } @media screen and (max-width: 767px) { // 如果使用者之視窗寬度 <= 768px,將會再載入這裡的 CSS。 } @media screen and (max-device-width: 480px) { // 如果使用者之裝置寬度 <= 480px,將會再載入這裡的 CSS。 }
在Media Queries 中,我们最常使用min-width 和max-width 来判断使用者的视窗宽度,而max-device-width 则是使用者「装置」的最大宽度。 width 和device-width 差在哪里?
- width : 因为浏览器可以自由调整宽度,所以这边指的是该浏览视窗的宽度。
- device-width : 就算你把浏览器视窗弄到符合最大(小)宽度,还是不会生效。 因为,device-width 指的是使用者的「装置」最大宽度,而不是浏览器视窗。 所以,device-width 常用在判断手机上。
所以,你也可以自己加上其他的条件下去。 要注意的是,每一个条件之间请用and 来分隔,并要适时加上括号以免错误。
min-width 是最小宽度;max-width 是最大宽度,可以用来表示一定的范围。
<link> 写在HTML 里头的判断
上一节的语法,你也可以把它个别拆成好几个档案,然后用HTML 的<link> 来载入并且判断。 下面为HTML 代码:
<link rel="stylesheet" type="text/css" href="all.css" media="screen"> <link rel="stylesheet" type="text/css" href="a.css" media="screen and (max-width: 767px)"> <link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 768px) and (max-width: 979px)"> <link rel="stylesheet" type="text/css" href="c.css" media="screen and (min-width: 1200px)"> <link rel="stylesheet" type="text/css" href="d.css" media="screen and (max-device-width: 480px)">
我们就可以用link 中的media 属性来判断使用者的视窗/ 装置宽度,如上。 之后,在每一个css 档案中你就可以写若使用者宽度符合条件的CSS 。 如a.css 中,就是要写如果使用者之视窗宽度<= 768px,要再载入的CSS。
注意事项
在Media Queries 中的CSS,其效果是覆盖原本预设的CSS。 所以,你要先有一份完整的CSS,再使用Medai Queries,对细部元素做调整。 所以,绝对不是把全部的CSS 复制一遍到Media Queries 中再修改喔!
Viewport
如果网页没有做Responsive Web Design 的话,手机的浏览器会自动假装解析度变很大,会让网页完整显示。 但是,这就让字变得很小,使用者还要去做放大而不能直接阅读。 而这个meta 标签是为了防止这样的情形发生( iphone 据说会有此情形),让网页显示的宽度就直接是装置的宽度,不会把网页硬塞。 这段只要加在HTML 的<head> 里头即可。
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
针对某装置下去做设定、快速使用: Media Query Snippets
Media Query Snippets这个网站搜集了很多行动装置的@media条件式,你可以直接复制来使用。 如下图,有一堆的装置你可以拿去设定:(网址: http://nmsdvid.com/snippets/ )
另外,其实你不太需要去对每个装置都去做调整,基本上使用行动装置的max-device-width: 480px ,就绰绰有余了。 上面的网站,是帮你做个整理,以便不时之需。
IE8 Hack
目前在网路上有人制作了让不支援Media Queries 的浏览器透过Javascript 的方式也能支援。 而目前这个似乎还是有点小问题,实际能不能使用请直接至该网站查询:
css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers
动手吧
另外,目前网路上也有支援Media Queries 的Framework,如Bootstrap 等等。 Bootstrap 已经帮你把很多版面在不同装置的显示效果设定好,或许你也可以试试看使用这个不错又简单的Framework,Bootstrap 。 如果你使用了Bootstrap,还是不代表这篇对你没有需要,因为像Bootstrap只有对格局、图片做变动,而细节的部份,你还是得使用media queries,才能把整个Responsive Web Design做到最好。
(Bootstrap官网: http://twitter.github.com/bootstrap/ ;本站教学介绍: http://fundesigner.net/twitter-bootstrap/ )
事实上,Media Queries 只是让你能够在不同装置上做调整,至于调整的好看不好看,就得看大家的CSS 造化如何了,加油!
来源:乐在设计 > CSS3 Media Queries 詳細介紹與使用方法,Responsive Web Design 必備技術
相关推荐
Integrate CSS3 media queries into your designs to use different styles for different media. You’ll also learn about future media queries which are evolving in CSS4. Responsive images allow different ...
响应式Web设计是一种现代网页开发方法,旨在提供跨设备、跨屏幕尺寸的无缝用户体验。它主要依赖于HTML5和CSS3的新特性来实现,确保网页在桌面电脑、平板电脑、智能手机和其他不同设备上都能自适应地展示内容。在这个...
本书《Responsive Web Design with HTML5 and CSS3 [eBook]》主要探讨了响应式网页设计的概念、方法和最佳实践。在当今这个多设备并存的时代,网站设计师和开发者面临着如何让网站在不同尺寸和分辨率的设备上提供...
CSS3的媒体查询(Media Queries)是响应式设计的核心,它们允许你根据设备的特定特性(如宽度、高度、分辨率等)应用不同的样式。这样,你可以为不同屏幕尺寸和设备类型定义不同的布局和样式规则,实现真正的响应式...
party tools Executing media queries to benefit responsive designs Understand the basics of responsive workflow and boilerplate frameworks Improve performance of responsive web design Maintain ...
响应式Web设计是一种现代网页设计方法,旨在确保网站在不同设备和屏幕尺寸上提供一致且优化的用户体验。这种设计策略的核心是使用灵活的布局、媒体查询和可适应的图像,以便网页可以根据访问者所使用的设备(如桌面...
**响应式网页设计(Responsive Web Design, RWD)** - **定义**:响应式网页设计是一种使网站在不同设备(如桌面、平板、手机等)上都能良好显示的设计方法。它依赖于灵活的布局、图片以及CSS媒体查询。 - **目标...
本书《Beginning Responsive Web Design with HTML5 and CSS3》深入浅出地介绍了响应式网页设计的基础知识和实用技能。通过学习本书,读者不仅能够掌握构建响应式网站的基本方法,还能够了解到如何优化网站性能、...
响应式网页设计(Responsive Web Design, RWD)是一种让网页内容在不同设备、不同屏幕尺寸下都能良好显示的设计理念和技术。通过使用灵活的布局、可伸缩的图片和其他智慧型设计技术,RWD使得同一个网站能够在桌面...
响应式网页设计(Responsive Web Design,简称RWD)是一种现代网页设计方法,旨在提供一个能够适应不同设备屏幕尺寸、分辨率和方向的网站界面。这种设计技术的出现是为了解决传统固定宽度网页在移动设备上显示不佳的...
响应式设计中特别重要的一点是CSS3提供的媒体查询(Media Queries),它允许设计师为不同屏幕尺寸定义特定的样式规则,从而实现响应式布局。 JavaScript是网页中实现动态交互的核心脚本语言。JavaScript不仅能够...
1. 响应式Web应用的概念:响应式Web设计(Responsive Web Design)是一种网页设计技术,使网站能够自适应不同屏幕尺寸和分辨率。这包括了使用媒体查询(Media Queries)、灵活的网格布局(Flexible Grid Layout)、...
响应式Web设计是一种现代网页开发方法,旨在提供跨设备、跨屏幕尺寸的无缝用户体验。HTML5和CSS3是实现这一目标的关键技术。本资源——"响应式Web设计HTML5和CSS3实战(第二版)code"——包含了Ben Frain著作中的...
响应式Web设计(Responsive Web Design,简称RWD)是一种使网站能够适应不同设备屏幕尺寸的设计方法。随着移动互联网的快速发展,用户越来越多地通过各种终端访问网页,如智能手机、平板电脑等。因此,创建一个能够...