Home >Web Front-end >HTML Tutorial >[Transfer] Responsive web design CSS3 Media Queries_html/css_WEB-ITnose
[Transfer] Responsive web design CSS3 Media Queries_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 11:43:48938browse
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:
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
means when the width of the screen When it is greater than or equal to 400px, apply styleA.css
in the media attribute:
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
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 c9ccee2e6ea535a969eb3f532ad9fe89 tag:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ .class { background: #ccc; }} 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:
| Device type description
| ||||||||||||||||||||||
| all
| All devices
| td> ||||||||||||||||||||||
| aural
| Hearing equipment | ||||||||||||||||||||||
| braille
| Braille tactile device
| ||||||||||||||||||||||
| handled
| Portable devices, such as mobile phones and tablets
| ||||||||||||||||||||||
| | <!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><title>css3-media-queries-demo</title><style>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; }}</style></head><body><div class="content"> <div class="leftBox"></div> <div class="middleBox"></div> <div class="rightBox"></div></div></body></html>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