Lecture 23, Part 1: Media Queries

Loading...

来自 Johns Hopkins University 的课程

面向 Web 开发者的 HTML、CSS 与 Javascript 课程

4007 个评分

Johns Hopkins University

面向 Web 开发者的 HTML、CSS 与 Javascript 课程

4007 个评分

课程 4（共 6 门，Specialization Ruby on Rails Web Development）

你是否意识到用户与Web应用程序直接交互的唯一渠道是通过Web页面？对于用户来说，Web页面实现得不好，服务端将变得与用户毫不相干！如今用户对Web页面之外有更多的期待：必须加载够快、传递需要的服务、舒适的在各个设备上浏览：从台式电脑到移动手机。在本门课程中，我们将学习每个Web页面程序员需要知道的基本工具。我们将从最基本的如何用HTML、CSS实现现代的Web页面学习开始。然后我们将进一步学习如何编写页面代码，例如根据用户屏幕的大小来自动调整组件位置和它们的大小。你将能够自己编写一个台式电脑和移动手机都能用的网页。不需要“捏和缩放”！最后，我们将对网络上最普遍、最受欢迎的、令人难以置信的强大语言：Javascript，进行深入的介绍。用Javascript，你将能够建立一个全功能的Web应用程序，通过利用Ajax传递服务端的功能和数据给最终用户。

从本节课中

Introduction to CSS3

A lot of people "tinker" with CSS. In this module, we'll take you from the very basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict resolution. We'll go over the 'box model', background property, etc. We'll finish off the module with learning about Responsive Design using our own CSS code as well as start introducing Twitter Bootstrap with its essential Grid System.

Lecture 23, Part 1: Media Queries4:51

Lecture 23, Part 2: Media Queries9:19

Lecture 24, Part 1: Responsive Design7:11

Lecture 24, Part 2: Responsive Design11:37

与讲师见面

Yaakov Chaikin
Adjunct Professor, Graduate Computer Science
Whiting School of Engineering

[SOUND] Media queries allow

you to group styles together and target them to devices based on some criteria.

For example, you can target a device by its width, its height,

or orientation like landscape or portrait.

Of course one of the most obvious differences between viewing

a website on a desktop browser and your cell phone is the screen size.

Remember that using CSS you have the power to produce very different web page layouts

from the same HTML.

Remember CSSgarden dot com?

So, it only makes sense then, that the most common way to adjust the styling and

layout of your page is to provide different styles for

different screen sizes of the user's devices.

This is why it's crucial to learn at least the basics of how to

utilize media queries.

Without them responsive design, which we'll start talking about fairly soon,

wouldn't be possible.

Let's go ahead and explore the basic syntax of media queries.

A media query starts with a keyword @media, and

then it is followed by a media feature, and followed by curly braces.

Within those curly braces you have your styles,

it's basically like a style sheet within a style sheet.

Each media feature resolves to either true or false.

You can have more than one media features combine together using logical operators.

If the media features resolve to true, the style within the curly braces apply.

When writing media queries, make sure you close the curly braces for

the media query as a whole and then separately each styling rule.

There are quite a bit of these media features that are available.

So you can have max-width, you can have min-width, you can have height which is

not listed here, you can even target orientation of your device, portrait or

landscape, you can target only screens as opposed to targeting only print.

Again, if any of these things evaluate to true, the styles contained within

the curly braces of the media query will be in effect.

As I mentioned before, even though there are quite a bit of these media features

that are available the most common ones are the max-width and the min-width.

And again,

the fact that they're the most common really is connected to the fact that

the most common way of targeting different devices is by the width of the device.

In addition as I said before,

the media features can be combined using logical operators.

One of the most common logical operators is the and operator.

As an example, here's a code snippet that targets a width range.

Here you see we're targeting any device that falls within the range

of its width being anywhere from 768 pixels until 991 pixels.

If the devices has a width that is smaller than that or

larger than that the styles applied within this media query will not apply.

Another way to combine media features is to place comma in between them which will

basically translate into being equivalent to an OR operator.

In this code snippet we're showing that we're targeting any

device whose width is no larger than 767 pixels or

any device that is at least 992 pixels in width.

Now, practically speaking, when you approach responsive design and

responsive layouts, the most common logical operator is the and operator.

So if you know that operator, you're in pretty good shape.

Now before we jump into a code example I'd like to show you a very common approach

how you structure media queries within your style sheet.

What usually happens is you have a few of these media queries, but

you almost always start with some base styles.

Base styles will apply across the board no matter what screen size

you actually are viewing the website on.

Then you go ahead and start targeting a particular screen size

by either changing some of the properties of the base styles or

adding something else to them or maybe taking something away.

Now an important point to point out,

and especially when you're using widths of screen sizes of the devices

is that you have to be very careful not to overlap range boundaries.

So in this example you will notice that the first query has the minimum width

of 1200 pixels and the second query is coming up it's a range again.

And it comes up, up to max width of 1199 pixels,

if I were to say 1200 pixels it will mean there always inclusive.

It will mean that both sets of styles will apply and

most probably things will be pretty messy and very hard to maintain.

So it's important when you structure these media queries that you have very clean,

separate boundaries.

In part two of this lecture, we're going to jump into the code editor and

see these concepts in action.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2018 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取