Home > Industries > Media
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>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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
