Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of media characteristics in CSS3, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

CSS3 Media characteristics and Responsive Design

With the continuous development of science and technology, the web browsing terminals are becoming more and more diverse, and users can access the website through wide-screen televisions, desktop computers, laptops, tablets and smartphones. Although there is no guarantee that a website will look exactly the same on different screen sizes and devices, at least make your Web page adapt to the user's terminal and make it better presented to the user. Use the MediaQuery module in CSS3 to adapt a page to different terminals (or screen sizes), giving the page a better user experience.

Media type media type (Media Type) is a common and useful attribute in CSS2, through which different styles can be specified for different devices.

There are nearly ten media types in practice, and only a few are commonly used in practice. However, there are many media type reference methods, and the common media type reference methods are:

Link tags,

Xml mode,

@ import

New @ media added by CSS3

1. Link method

The media type introduced by the link method is actually in the

< link>

When a tag references a style, it specifies a different media type through the media attribute in the link tag. The introduction of media types in this way often follows the referenced style file, as follows:

< link rel="stylesheet" type=" text/css" href="style.css" media="screen" />

< link rel=" stylesheet" type=" text/css" href=" print.css" media=" print" />

2. Xml mode

The media type referenced by xml is very similar to the media type introduced by link, and is also specified through the media attribute.

3. @ import mode

@ import is one of the methods used to reference style files, as well as media types. There are two main ways for @ import to introduce media types

Http:/ / www.iis7.com/b/plc/

One is to call another style file through @ import in the style.

The other is introduced in tags, but this method of use is not supported in IE 6 and IE 7. For example, when another style file is called in a style file, the corresponding media type can be specified. @ import url (reset. Css) screen; @ import url (print. Css) print; introduces the media type method into the tags in. @ import url (style.css) all

4. @ media mode

@ media is a new feature introduced in CSS3 called Media query. Media types can also be introduced in the page through this property. @ media introduces media types somewhat similar to @ import, but also in two ways:

1)。 Reference the media type in the style file: @ media screen {selector {/ * your style code is written here. * /}}

2)。 The way to introduce media types using @ media is to refer to them in the tag. @ media screen {selector {/ * your style code is written here. * /}}

Media Features:

Media feature (Media Query) is an enhanced version of CSS3's media type (Media Type). In fact, you can think of Media Query as "Media Type (judgment condition) + CSS (qualified style rules)".

The property sets of Media Query and CSS are similar, with the following main differences:

Media Query accepts only a single logical expression as its value, or no value.

The CSS attribute is used to declare information about how the page is represented; Media Query is an expression used to determine whether the output device satisfies certain conditions.

Most people in Media Query accept the min/ max prefix, which is used to express their logical relationship and to apply to cases greater than or equal to or less than or equal to a value.

The CSS property requires that there must be an attribute value, and Media Query can have no value, because its expression returns only true or false.

How to use Media Query:

Media Query can use different styles under different conditions, so that the page can achieve different rendering effects under different terminal devices. Media Query has its own usage rules. Specifically, the use of Media Query is as follows:

@ media Media Type and (Media Features) {your style} you must start with @ media when using Media Query, and then specify the media type (also known as the device type), followed by the specified media characteristics (also known as device characteristics).

The writing style of media characteristics is very similar to that of style, which is mainly divided into two parts.

The first part refers to media characteristics.

The second part is the value specified by the media property, and the two parts are separated by colons. For example: (max- width: 480px) the combination is similar to different CSS collections. But unlike the CSS attribute, media properties are judged by min/ max to indicate greater than, equal to, or less than as a logical judgment, rather than using symbols such as less than ().

1. Maximum width max-width "max-width" is one of the most commonly used media features, which means that the style takes effect when the media type is less than or equal to the specified width

two。 Minimum width min-width min-width is the opposite of max-width, that is, when the media type is greater than or equal to the specified width, the style takes effect.

3. Multiple media features use Media Queries to combine multiple media features using the keyword "and". That is, a Media Query can contain 0 to more expressions, which in turn can contain 0 to more keywords, and a media type.

4. The output width of the device screen Device Width is on smart devices, such as iPhone, iPad, etc., and the corresponding style can be set according to the screen size (or call the appropriate style file). You can also use min/ max parameters, such as min-device-width or max-device-width, for the screen.

5. The not keyword, the keyword not, is used to exclude certain established media types, that is, devices that conform to the expression. In other words, the not keyword indicates that the reverse operation is performed on the following expression. As follows:

The @ media not print and (max- width: 1200px) {style code} code indicates that the style code will be used in all devices except printing devices and devices whose screen width is less than 1200px.

6. Only keyword, only is used to specify a specific media type, and browsers that do not support media queries can be excluded. In fact, only is often used to hide style sheets from devices that do not support Media Query but support Media Type. For example, devices that support media features call styles normally and treat them as if only does not exist; devices that do not support media features but support media types will not read styles because they will first read only rather than browsers where screen; does not support Media Query, and styles will not be adopted regardless of whether only is supported or not.

Responsive (responsive) layout concept:

As users access a variety of Web page terminals, such as iPad, iPhone, tablets, desktops and notebooks, the previous design is no longer suitable for these diverse terminal devices. In order to meet the needs of users, Ethan Marcotte published a groundbreaking article in A List Apart, integrating three existing development technologies (elastic grid layout, elastic pictures, media and media query) and named RWD (Responsive Web Design, responsive design).

What is responsive design?

Wikipedia describes it like this: Responsive is designed as RWD, which is a design method that carefully provides a variety of devices to browse the web, and RWD allows web pages to show different design styles on different devices. Thus it can be seen that RWD is not a fluid layout or a grid layout, but a unique web design method.

Responsive design features

Responsive web page design, not only to consider the order of its element layout, but also to "respond to every request", so it needs to meet three conditions. EthanMarcotte, the father of Responsive design, describes these three conditions in this way.

-websites must have a flexible grid foundation

Images referenced to the site must be scalable

-different display styles require different styles to be set on the Media Query.

-without any of the features, it cannot be called a qualified Responsive web design.

Terminology in Responsive

In responsive design, there are some proprietary terms, and understanding these terms is essential to help understand and learn responsive design.

1. Fluid grid

Fluid grid is a simple grid system, this kind of grid design refers to the grid system in fluid design, and each grid uses percentage units to control the grid size. The biggest advantage of this grid system is that the grid size can be scaled according to the screen size at any time.

two。 Elastic picture

Elastic picture means that the picture is not set a fixed size, but is scaled according to the fluid grid to adapt to the size of various meshes. The implementation method is relatively simple, a piece of code can be determined. Img {max- width: 100%;}

3. Media inquiry

Media queries have been strongly extended in CSS3. Use this property to allow the design to adapt to the corresponding style according to the user's terminal device. This is also the most critical part of responsive design. It can be said that Responsive design loses its meaning of survival without Medial Query. To put it simply, media inquiries can find out the appropriate style according to the size of the device.

The main concern of Responsive design is that according to the current width of the device used by the user, the Web page will load an alternate style to implement a specific page style.

4. Screen resolution

Screen resolution refers to the resolution of the device you use to browse Web pages, such as smartphone browsers, mobile browsers, tablet browsers, and desktop browsers. The Responsive design uses the Media Query attribute to adapt the corresponding CSS style to the resolution used by the browser. Therefore, screen resolution is an important thing in Responsive design, because the corresponding style can only be called if you know at which resolution the Web page will display what effect.

5. Main breakpoint

The main breakpoint is a new word in Web development, but it is an important part of Responsive design. The simple description is the critical point of the width of the device. In Media Query, the attribute values corresponding to the media characteristics min-width and max- width are breakpoint values in responsive design. To put it simply, it is to use primary and secondary breakpoints to create conditions for media queries. Each breakpoint will call a style file (or style code), and loading the style file at the main breakpoint will directly affect the effect of Web. In addition to the primary breakpoints, in order to satisfy more effects, you can also add secondary breakpoints on this basis. However, with the increase in the number of major and secondary breakpoints, the styles that need to be maintained increase accordingly, and the cost increases accordingly. Therefore, in practical use, we need to determine the breakpoint according to the needs of our own products. To sum up, the following three main points should be grasped in setting the breakpoint.

-satisfy major breakpoints

-add some other breakpoints if possible

-set a desktop breakpoint higher than 1024px.

Responsive layout skills:

Layout is a simple problem and must be included in every web design, but the first step in using Responsive design is to make the page layout as simple as possible. There are some tricks to implement a simple layout.

1. Try to minimize the use of unimportant div

two。 Do not use inline elements (inline)

3. Use JS or Flash as little as possible

4. Discard useless absolute positioning and floating styles

5. Discard any redundant structures and do not use 100% settings. If you have to give up, what can help Responsive determine a better layout?

6. Use HTML5 Doctype and related guidelines

7. Reset the style (reset. Css)

8. A simple core layout with semantics

9. Use simple techniques for important web page elements, such as navigation menus.

Use these techniques to keep HTML simple and clean, and don't rely too much on modern techniques, such as CSS3 special effects or JS scripts, in key parts of the page layout. Having said so much, what kind of layout or HTML structure is simple and clean? Here is a quick test method. First of all, disable all styles on the page (and style-related information) and open them in the browser. If the content is arranged in order and easy to read, then the structure will not be so bad.

Meta tag:

When a Responsive design page is tested on a smart device (such as iPhone or Android), you will be surprised to find that none of the media queries work-the page is still displayed in a normal style, that is, a globally scaled-down page. This is because many smartphones use a virtual visual area that is much larger than the actual screen size, and the main purpose is to keep the page from being distorted by the actual visual area when reading on the smartphone side. In order to make the smartphone match the corresponding style according to the media query and make the page display normally in the smartphone, a special meta tag is specially added. The main purpose of this tag is to optimize the smartphone when browsing the web, and to customize the size and zoom level of the visual area of the interface. The usage of the meta tag is as follows:

< meta name=" viewport" content="" />

In the actual project, in order for the Responsive design to be displayed normally in smart devices, that is, to adapt to the size of the screen and display on the screen when browsing the Web page, you can reset it through the meta tag in this visual area, telling it to use the width of the device as the width of the view, that is, to disable the effect of its default adaptive page, as follows:

In addition, because Responsive design can fully show Responsive design style only by combining the Media Queries attribute of CSS3, browsers must support CSS3 Media Queries.

Thank you for reading this article carefully. I hope the article "sample Analysis of Media Features in CSS3" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.