[Transfer] Responsive web design CSS3 Media Queries_html/css

Start studying responsive web design, CSS3 Media Queries is an introduction.

Media Queries, their function is to allow adding expressions to determine the media environment, so as to apply different style sheets. In other words, it allows us to change the layout of the page to precisely fit different devices without changing the content.

So, how do Media Queries work?

Two ways, one is to directly determine the size of the device in the link, and then quote different css files:

Copy after login

means when the width of the screen When it is greater than or equal to 400px, apply styleA.css

in the media attribute:

screen is one of the media types. CSS2.1 defines 10 media Types and are called keywords. Other keywords include not (exclude a certain device), only (limit a certain device) Device) (min-width: 400px) is the media attribute, which is placed in a pair of parentheses. For complete features, please refer to the related Media features section Copy after login

means that when the width of the screen is greater than 600 and less than 800, other attributes can be seen using styleB.css

Here: http://www.swordair.com/blog/2010/08/431/

Another way is to write it directly in the tag:

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ .class { background: #ccc; }} Copy after login

The writing method is to add @media in front, and the other media attributes in the link are the same

In fact, it is basically style override~, determine the device, and then reference different style files to cover.

It should be noted that since the web page will adjust the layout according to the screen width, you cannot use absolute width layout, nor can you use elements with absolute width. This is very important, otherwise horizontal scroll bars will appear.

Supplement: keywords such as not only all in media query

Today a group of friends in the group asked about @media only screen and ( What does only mean in min-width: 320px)? I checked some information.

not: not is used to exclude certain specific devices, such as @media not print (non-printing device),

only: is used to specify a special media type. For mobile devices that support Media Queries, if the only keyword exists, the mobile device's web browser will ignore the only keyword and directly apply the style file based on the following expression. For devices that do not support Media Queries but are capable of reading Media Type web browsers, this style file will be ignored when the only keyword is encountered.

all: All devices, this one should be seen frequently

There are others:

media_type

设备类型说明

all

所有设备

aural

听觉设备

braille

点字触觉设备

handled

便携设备，如手机、平板电脑

print

打印预览图等

projection

投影设备

screen

显示器、笔记本、移动端等设备

tty

如打字机或终端等设备

tv

电视机等设备类型

embossed

盲文打印机

media_type

Device type description

all

All devices td>

aural Hearing equipment

braille

Braille tactile device

handled

Portable devices, such as mobile phones and tablets print

css3-media-queries-demo body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding: 0; margin: 0;}.content{ zoom:1;}.content:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }.leftBox, .rightBox{ float: left; width: 20%; height: 500px; margin: 5px; background: #ffccf7; display: inline; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 2s ease; transition: width 1s ease;}.middleBox{ float: left; width: 50%; height: 800px; margin: 5px; background: #b1fffc; display: inline; -webkit-transition: width 1s ease; -moz-transition: width 1s ease; -o-transition: width 1s ease; -ms-transition: width 1s ease; transition: width 1s ease;}.rightBox{ background: #fffab1;}@media only screen and (min-width: 1024px){ .content{ width: 1000px; margin: auto }}@media only screen and (min-width: 400px) and (max-width: 1024px){ .rightBox{ width: 0; } .leftBox{ width: 30%} .middleBox{ width: 65%}}@media only screen and (max-width: 400px){ .leftBox, .rightBox, .middleBox{ width: 98%; height: 200px; }} Copy after login Print preview, etc.

projection Projection equipment

screen

Monitors, notebooks, mobile devices and other devices

tty

Equipments such as typewriters or terminals

tv

Types of equipment such as televisions

embossed

Braille printer

tr> Related information expansion: http://book.51cto.com/art/201204/328362.htm

http://www.w3cplus.com/content/css3- media-queries

http://www.w3.org/TR/CSS2/media.html#media-types

------------- --------------------Gorgeous dividing line----------------------------- ----------------------------------

The following is the demo A three-column layout, under different sizes, changes to two columns, and then to one column~ Code: Reference article: http://www.swordair.com/blog/2010/08/431/ http://www .zhangxinxu.com/wordpress/2011/08/css3-media-queries Some unofficial stories/ http://webdesignerwall.com/tutorials/css3-media-queries http: //www.ruanyifeng.com/blog/2012/05/responsive_web_design.html Author: Mofish http://www.cnblogs.com/mofish/archive/2012/05 /23/2515218.html

[Transfer] Responsive web design CSS3 Media Queries_html/css_WEB-ITnose