css determines different resolutions and displays different width layouts to implement adaptive width_html/css

Home

Web Front-end

HTML Tutorial

css determines different resolutions and displays different width layouts to implement adaptive width_html/css_WEB-ITnose

Jun 24, 2016 am 11:39 AM

1. DIVCSS small case description
We first set a DIV box CSS named ".abc", set its height to 300px, css border to black; and set margin:0 auto layout to be centered. These two styles are preset for ease of viewing.
We manually drag the browser to display the width, and then observe the change in the width of the box. When the browser width is adjusted to a width no greater than 500px, the corresponding box width displays 100px; when the browser width is adjusted to no greater than 901px, the box width is displayed ".abc" corresponds to the box width displaying 200px; when the browser width is adjusted to be greater than 1201px, the box object width displays 1200px; when it is less than 1200px, the display width is 900px.

.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px}  } /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */  @media screen and (max-width: 1200px) { .abc {width: 900px}  } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */  @media screen and (max-width: 901px) { .abc {width: 200px;}  } /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */  @media screen and (max-width: 500px) { .abc {width: 100px;}  } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

Copy after login

It should be noted that the CSS code order is from large to small (the larger the width of the browser, the higher the front). This is because of the logical relationship. @media's judgment of CSS debugging will lead to invalid judgment.

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot; /&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style&gt; .abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px}  } /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */  @media screen and (max-width: 1200px) { .abc {width: 900px}  } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */  @media screen and (max-width: 900px) { .abc {width: 200px;}  } /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */  @media screen and (max-width: 500px) { .abc {width: 100px;}  } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */  &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;abc&quot;&gt;DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

Copy after login

4. In order to be compatible with browsers below IE9, you need to add a google JS. Of course, you can download the attractive html

&lt;!--[if lt IE 9]&gt; &lt;script src=&quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt;

Copy after login

5. Perfectly compatible

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> .abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px}  } /* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */  @media screen and (max-width: 1200px) { .abc {width: 900px}  } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */  @media screen and (max-width: 900px) { .abc {width: 200px;}  } /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */  @media screen and (max-width: 500px) { .abc {width: 100px;}  } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */  </style> &lt;!--[if lt IE 9]&gt; &lt;script src=&quot;http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js&quot;&gt;&lt;/script&gt; &lt;![endif]--&gt; </head> <body> <div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> </body> </html>

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn