Home > Developer > Web Develop

CSS to determine the different resolution display different width layout to achieve adaptive width

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, CSS Div page layout When the resolution is less than or equal to 1024px (pixels), the div layout object displays 1000px width, when the resolution is greater than 1024px display 1200px width and other requirements. Use CSS to change the width of the browser display so that the layout of the page width changes dynamically (Web page width automatically with the width of the browser to widen and narrow).
With the development, more and more computer User display resolution is getting higher, but some users still use 1024px resolution of the display (according to several browser resolution statistics platform to get data now using 1200 resolution of the following users very little, However, we still need to consider the CSS layout at least 1024px resolution of the user), if the page layout width fixed to 1200px,1024 resolution when users browse the Web page, scroll bar appears under the browser, in order to solve this problem, You can call different layout widths by using the CSS3 style to determine the width of the user's browser.

Using CSS words and syntax

The code is as follows:

@media screen and (judging property) {CSS style selector}Notice here that the curly braces are loaded to change the CSS style selector.

Two, different resolution display different width style case

1, divcss small case description
We first set up a div box css named ". ABC", set its height to 300px,css border to black, and set the margin:0 auto layout to center. These two styles are pre-set for easy observation.
We manually drag and drop the browser display width, and then observe the width of the box changes, when the width of the browser to adjust to a width of less than 500px, corresponding to the width of the box 100px; Adjust the browser width is not more than 901px, display ". abc" corresponding box width display 200px; When the width of the browser is greater than 1201px, the width of the box object is 1200px and the display width is 900px when it is less than 1200px.

2. CSS Code

The code is as follows:


. abc{height:300px; border:1px solid #000; margin:0 Auto} 
@media screen and (min-width:1201px) { 
. ABC {width:1200px} 
} 
/* CSS Comment: Set the width of the browser is not less than 1201px when the ABC display 1200px width */ 

@media screen and (max-width:1200px) { 
. ABC {width:900px} 
} 
/ * Set the width of the browser to 1200px when the viewer is not wider than 900px * / 

@media screen and (max-width:901px) { 
. ABC {width:200px;} 
 
/* Set the width of the browser is not more than 901px when the ABC display 200px width */

@media screen and (max-width:500px) {  
.ABC {width : 100px;}  
 
/* Set the width of the browser is not more than 500px when ABC display 100px width */

Note that the CSS code order, from large to small layout css (to determine the width of the browser is bigger and lower), this is because of the logical relationship, @media to judge the error of the CSS will result in judgment failure.

3. HTML code

The code is as follows:

<! DOCTYPE html> 


<meta charset= "Utf-8"/>
<title> Untitled Document </title>
<style>
. abc{height:300px; border:1px solid #000; margin:0 Auto}
@media screen and (min-width:1201px) {
. ABC {width:1200px}
}
/* Set the width of the browser to 1201px when the viewer is not less than 1200px */

@media screen and (max-width:1200px) {
. ABC {width:900px}
}
/* Set the width of the browser to 1200px when the viewer is not wider than 900px */

@media screen and (max-width:900px) {
. abc {width:200px;}
}
/* Set the width of the browser to 900px when the viewer is not wider than 200px * /

@media screen and (max-width:500px) {
. abc {width:100px;}
}
/* Set the width of the browser to 500px when the viewer is not wider than 100px * /

</style>

<body>
<div class= "ABC" >divcss5 Example: my div width will vary with the width of the browser Oh, try changing the browser width </div>
</body>

4, in order to be compatible with IE9 the following version of the browser needs to join a Google JS, of course, can download the inductive HTML

The code is as follows:
<!--[if Lt IE 9]> 
<script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script >
<! [endif]-->

The JS code into the

5, perfect compatibility with the major browser Html+css+js source code

The code is as follows:
<! DOCTYPE html>


<meta charset= "Utf-8"/>
<title> Untitled Document </title>
<style>
. abc{height:300px; border:1px solid #000; margin:0 Auto}
@media screen and (min-width:1201px) {
. ABC {width:1200px}
}
/* CSS Comment Description: Set the browser width is not less than 1201px when the ABC display 1200px width */

@media screen and (max-width:1200px) {
. ABC {width:900px}
}
/* Set the width of the browser to 1200px when the viewer is not wider than 900px */

@media screen and (max-width:900px) {
. abc {width:200px;}
}
/* Set the width of the browser to 900px when the viewer is not wider than 200px */

@media screen and (max-width:500px) {
. abc {width:100px;}
}
/* Set the width of the browser to 500px when the viewer is not wider than 100px * /

</style>
<!--[if Lt IE 9]>
<script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
<! [endif]-->

<body>
<div class= "ABC" >divcss5 Example: my div width will vary with the width of the browser Oh, try changing the browser width </div>
</body>

CSS to determine the different resolution display different width layout to achieve adaptive width

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
convert to full width text how to set column width in excel transfer domain to different host how to set image height and width in html how to define column width in html table different ways to write j different threats to computer security

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More