Responsive Web Design-media query (media query) __ Response

Source: Internet
Author: User

in some simple stations, we usually use the response to make the site compatible with various types of screen size, here is mainly about media, through media to achieve different screen sizes using different styles.

First we need to introduce the Viewport attribute, and in order to ensure proper drawing and touch-screen scaling, we need to add the Viewport metadata label to the head tag

<meta name= "viewport" content= "width=device-width,initial-scale=1,maximum-scale=1" >

viewqport is the virtual window on our phone, Visual window, display area, his role is to create a virtual window, the
META tag Viewport property is on the mobile device to set the original size display and scaling of the declaration,
you can use the following parameters set:
Width: Control the size of the viewport, you can specify a value, if 600, or a special value,
such as device-width for the width of the device (in pixels of the CSS scaled to 100%). Height 
: Corresponds to width, specifying height. 
Initial-scale: The initial scaling ratio, which is the scale when the page is first load. 
Maximum-scale: Allows the user to scale to the maximum scale. 
Minimum-scale: Allows the user to scale to the minimum scale. 
user-scalable: Whether the user can scale manually

The demo code is as follows:

<!doctype html>
<html>
    <head>
        <!--Join this line of code-->
        <meta name= "Viewport" Content= "Width=device-width, initial-scale=1" >
    </head>

    <body>
    </body>
</html>

To introduce viewport to the page, let's introduce media query below

Media query is written as follows:

@media screen and (max-width:989px) {/
    * * This is written when the width of the <=989px is used on the style * *
/}///

* The way above can be abbreviated as follows (screens do not write, Also the default is the screen) * * * *
@media (max-width:989px) {
    * * This is written when the screen width <=989px the style used * *

* We can also write a number of conditions to specify * *
/* Below indicates the style used when the screen is greater than or equal to 768px and is less than or equal to 1200px *
/@media (min-width:768px) and (max-width:1200px) {/
    * This is written as screen width ( 768px <= width <= 989px) The style used/
}

<!--If there are too many styles to write individually to a style file, you can introduce--> <!--by using the following means
, when Screen width width<=480px introduce this style file Demo.css--> <link rel= "stylesheet" type= "" Text/css "" "
max-width:480px) "  href=" Demo.css ">

In general, we divide the screen into the following categories:

/* Super small screen (mobile phone, less than 768px)/
@media (max-width:768px) {/
    *  here Write Style file * * * *

small screen (flat, greater than 768px) * * * *
@media (min-width:768px) {/
    *  Here Write the style file * */  }/

* Medium screen (desktop display, greater than 992px) * * * * *
@media ( Min-width: @screen-md-min) {  /* Here write Style file * * * *

Large screen (large desktop display, greater than 1200px)  *
* Media (min-width: @screen-lg-min) {/ 
    *  Write style file here   */
}

Here is a more complete case, the following demo for mobile phones and tablets are handled separately,
You can also hide some elements under the specified screen size, and not all of them are written here.
We can do according to their own ideas, the code is as follows:

<!doctype html> <html> <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "WID" Th=device-width, initial-scale=1 "> <title>demo</title> <!--pc screen here is the way to introduce an external style file, without media judgment, by default Use PC-side style effects Pc.css--> <!--<link rel= "stylesheet" href= "Pc.css" >--> <!--mobile phone screen here is the way to introduce an external style file, which Inside is when screen width <= 760px uses this style file Mobile.css--> <!--<link rel= "stylesheet" media= "(max-width:760px)" href= "mo Bile.css ">--> <!--ipad screen here is the way to introduce an external style file here is when the screen 768px <= width <= 1200px uses the style file Ipad.css--> & lt;! --<link rel= "stylesheet" media= "(min-width:768px) and (max-width:1200px)" href= "Ipad.css" >--> <!--are as follows direct
            Write--> <style>///* default is PC-side effect so there is no need to pass media judgment * * *{font-family: Microsoft Ya-hei;
            margin:0px;
        padding:0px;
            }. main{width:1300px;
        margin:0 Auto; }. top{
            height:100px;
            Background: #272822;
            line-height:100px;
            Color: #fff;
            Text-align:center;
            font-size:50px;
        Font-weight:bold;
            }. left{height:400px;
            Background: #272822;
            line-height:400px;
            Color: #fff;
            Text-align:center;
            font-size:50px;
            Font-weight:bold;
            width:642px;
        Float:left;
            }. right{height:400px;
            Background: #272822;
            line-height:400px;
            Color: #fff;
            Text-align:center;
            font-size:50px;
            Font-weight:bold;
            width:642px;
        Float:right;
            }. bottom{height:100px;
            Background: #272822;
            line-height:100px;
            Color: #fff;
            Text-align:center;
            font-size:50px; Font-weight:bold
            }. nav{height:15px;
        Clear:both; }/* Mobile screen when screen width <= 760px Specifies the following style/@media (max-width:760px) {. main{wid
            th:95%;
            }. top{background: #faa;
            }. bottom{background: #faa;
                }. left{Float:none;
                width:100%;
                height:100px;
                line-height:100px;
                margin-bottom:15px;
            Background: #faa;
                }. right{Float:none;
                width:100%;
                height:100px;
                line-height:100px;
            Background: #faa; }/* Flat screen when the screen 768px <= width <= 1200px Specifies the following style */@media (min-width:768px) and (max-width:1
            200px) {. main{width:95%;
               }. top{ Background: #aaf;
                }. left{Float:none;
                width:100%;
                height:200px;
                line-height:200px;
                margin-bottom:15px;
            Background: #aaf;
                }. right{Float:none;
                width:100%;
                height:200px;
                line-height:200px;
            Background: #aaf;
            }. bottom{background: #aaf; } </style> </head> <body> <div class= "main" > <div class= "Top" >top </div> <div class= "nav" ></div> <div class= "left" >left</div> <di V class= "right" >rigth</div> <div class= "nav" ></div> <div class= "Bottom" >bottom& lt;/div> </div> </body> </html>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: