Media query
What is media query?
Media queries allow us to set CSS styles for device displays based on their features (such as viewport width, screen scale, device orientation: horizontal or vertical). Media queries consist of media types and one or more conditional expressions that detect media characteristics. Media features that can be used in media queries are wIdth, height and color (etc.). Using media queries, you can customize the display effect for certain output devices without changing the content of the page.
1、Media query operation mode
The actual operation is: ask the device (called an expression) to start, if the expression results true, media query CSS is applied, if the expression results false, media query CSS will be ignored.
2、Media query structure
@media all and (min-width:320px) {
body { background-color:blue;}
}
Device type (default is all)
screen It’s one of the media types. CSS2.1 defines 10 types of media.
and It is called a keyword, and other keywords also include not (excluding certain devices), only (which limits certain devices).
(min-width: 400px) It is the media characteristics that are placed in a pair of parentheses.
Default style note: the default style should be written in the front.
/* Print style */@media print {}
/* Small screen handheld devices such as mobile phones * / @media screen and (min-width: 320px) and (max-width: 480px) {}
/* Devices with width below 1024 such as tablets */ @media only screen and (min-width: 321px) and (max-width: 1024px) {}
/* PCClient or large screen device: 1028px to larger * / @media only screen and (min-width: 1029px) {}
/* Vertical screen */@media screen and (orientation:portrait) and (max-width: 720px) {corresponding pattern}
/* Horizontal screen */@media screen and (orientation:landscape) {corresponding style}
3、CSS2 Mediausage
In fact, not only CSS3 supports the use of Media, as early as CSS2 has supported Media, the specific use is to insert the following code in the HTML page heaad tag
I want to know if the mobile device is vertically placed.
<link rel=“stylesheet” type=“text/css” media=“screen and (orientation:portrait)” href=”style.css”>
The first piece of code is also implemented in CSS2 so that it can execute a specified style file with a page width of less than 960:
4、CSS attributes often involved
display; width; float; text-align; font
Responsive Web Design Responsive Web Design
1、Common layout plan
Fixed layout: Pixel as the basic unit of the page, regardless of device screen and browser width, only one set of size is designed;
Switchable Fixed Layout: Also with pixels as the page unit, referring to the size of the mainstream equipment, design several different widths of the layout. Select the most suitable width layout by identifying the screen size or browser width.
Flexible layout: Percentage as the basic unit of the page, can adapt to a certain range of all sizes of the device screen and browser width, and the perfect use of effective space to show the best results;
Mixed Layout: Similar to flexible layouts, it can accommodate all sizes of device screen and browser widths within a certain range, and can perfectly utilize the available space to display the best results; only two units of pixels and percentages are used as page units.
Layout response: Responsive page design and implementation requires different widths of the same content layout design, there are two ways: PC priority (from the PC side down design);
Moving first (from the mobile end up design); regardless of the design based on that pattern, to be compatible with all devices, it is inevitable to make some changes to the layout of the module when the layout response occurs (the critical point where the layout changes is called a breakpoint).
2、Response layout scheme
（1）Module content: extrusion pull (layout unchanged)
（2）Module contents: wrap up tiling (layout unchanged)
（3）Content in module: deletion – increase (layout unchanged)
（4）Module location transformation (layout change)
（5）Module display mode change: Hidden expansion (layout change)
（6）Module number change: deletion – increase (layout change)
3、Response layout characteristics
Design features:
Facing different resolutions, the equipment is flexible.
It can quickly solve the problem of multi device display adaptation.
Shortcomings:
Compatible with all kinds of equipment, heavy workload and low efficiency.
Code cumbersome, hidden and useless elements will appear, loading time lengthen.
In fact, this is a compromise design solution, many factors can not achieve the best results.
To some extent, the original layout structure of the website has changed, and user confusion will occur.
4.MetaLabel settings
Preparation: setting up Meta Tags
Ignore identifying the numbers in the page as phone numbers.
Ignoring the recognition of e-mail addresses in Android platform
When the website is added to the main screen quick start mode, it can hide the address bar, only for Safari of IOS.
Add the website to the main screen quick start mode, only for the safari top state bar style of IOS.
vw：viewpoint width，Window width, 1vw is equal to 1% of the window width.
vh：viewpoint height，Windows height, 1vh equals 1% of the viewport height.
vmin：vwAnd the smaller one in VH.
vmax：vwAnd the bigger one in VH.
vw, vh, vmin, vmax：IE9+Local support, Chrome / Firefox / Safari / Opera support, iOS Safari 8 + support, Android browser 4.4 + support, Chrome for Android 39 support
/*
htmlMedium font-size:100px;1rem = = 100px;100px = =? VW;If the design is 640px,
DPR 2 considered640px / 2 = = 320px;100vw = = 320px;1vw = = 3.2px;VW = = 100px;31.25vw == 100px;
1rem = 100px = 31.25vwIf the design is 750px,
DPR 2 considered750px / 2 = = 375px;100vw = = 375px;1vw = = 3.75px;VW = = 100px;26.67vw == 100px;
1rem = 100px = 26.67vw
*/Clear the default
@charset “utf-8”;
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure{margin:0;padding:0}
{box-sizing:border-box;}/Triggering weird box model * /
body{font-family: ‘Microsoft’s’ Black ‘;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:16px;}
b,strong{font-weight:normal;}
em,i{font-style:normal;}
a,u{text-decoration:none;}
img{border:0;display:block;}
ul,ol,li{list-style:none;}
input{outline:none;}
.clear-fix:after{content:”.”;clear:both;display:block;height:0;overflow: hidden;visibility: hidden;}
html,body{height:100%;}