Home > Industries > Media

Small instance of response design for media query---

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

As we all know, with the rapid development of mobile, for front-end developers,HTML5+CSS3 's position is becoming more and more important. The responsive design is also really popular. May at this time small code elder brother writes this article to say, also already some late, but, my humble purpose is convenient oneself later to read, of course, also hoped can be helpful to the person who sees this article. What is responsive design and what is media query?

Responsive Design : the development of front-end pages based on different device sizes to ensure that the page can be displayed properly on the desired device.

Media Query : It is the interval range of some sizes that are set for different devices in HTML5, and different codes are written according to different intervals. To suit the different devices.

After the small size of the elder brother check: Today's mainstream device resolution:240*320 pixels, 320*480 pixels, 480*800 pixels (mostly), 640*960 pixels (mostly), 480*854 (9:16) pixels (less), 1280*720 pixels (many), 1280* 800 pixels, 1920*1080 pixels and what 2k,4k are now, and so on.


Below is small yards elder brother , own idle to do nothing to do a three-level response case page, focusing on media query:

Code:

HTML section:

<!doctype html>

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">

<meta name= "viewport" content= "width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1, User-scalable=no "/>

<title> Untitled Document </title>

<link href= "Css/style.css" rel= "stylesheet" type= "Text/css"/>


<body>

<div class= "Content" >

<section id= "Top" >

<div class= "Top_bar" >

<a href= "#" target= "_blank" title= "> Welcome to B2c100.com cream, unique </a>

</div>

</section>

<section id= "Main" >

<div class= "Cont1 floatleft" >

<div class= "Cont1-1" >

<div class= "Cont1-1-1 floatleft" ><a href= "#" target= "_blank" title= "Home" > Home </a></div>

<div class= "Cont1-1-2 floatleft" >

<div class= "cont1-1-2-1" ><a href= "#" target= "_blank" title= "porcelain" > Porcelain </a></div>

<div class= "cont1-1-2-2" ><a href= "#" target= "_blank" title= "stone tools" > Stone tools </a></div>

</div>

</div><!--cont1-1-->

<div class= "Cont1-2" >

<div class= "cont1-2-1" ><a href= "#" target= "_blank" title= "wood" > Wood </a></div>

<div class= "Cont1-2-2" >

<div class= "cont1-2-2-1 floatleft" ><a href= "#" target= "_blank" title= "paper cutting" > Paper cutting </a></div>

<div class= "Cont1-2-2-2 floatleft" ><a href= "#" target= "_blank" title= "fabric" > Fabric </a></div>

</div>

</div><!--cont1-2-->

</div><!--cont1-->

<div class= "Cont2 floatleft" >

<div class= "cont2-1" >

<div class= "cont2-1-1" ><a href= "#" target= "_blank" title= "DIY" >DIY</a></div>

<div class= "Cont2-1-2" ><a href= "#" target= "_blank" title= "Antique Scholar's Objects" > Antique Scholar's Objects </a></div>

</div>

<div class= "Cont2-2" >

<div class= "cont2-2-1" ><a href= "#" target= "_blank" title= "Five Elements comprehensive" > Five elements comprehensive </a></div>

<div class= "cont2-2-2" ><a href= "#" target= "_blank" title= "news" > News </a></div>

</div>

</div><!--cont2-->

<div class= "Cont3 floatleft" >

<div class= "cont3-1" ><a href= "#" target= "_blank" title= "advertising One" > Advertising one </a></div>

<div class= "cont3-2" ><a href= "#" target= "_blank" title= "AD II" > Ads two </a></div>

</div><!--cont3-->

</section>

</div><!--content-->

</body>

CSS section:

@charset "Utf-8";

/* CSS document*/

/**

* Author:zhaijiwei

* version:1.0

* Last Changed by Zhaijiwei

* Last Update:2015-03-13

*/

Body,h1,h2,h3,h4,h5,h6,blockquote,p,pre,

Dl,dd,menu,ol,ul,

CAPTION,TH,TD,

Form,fieldset,legend,input,button,textarea,

header,footer,nav,article,aside,section,figure,figcaption{margin:0;padding:0}

h1,h2,h3,h4,h5,h6{font-size:100%}

Menu,ol,ul{list-style:none}

table{border-collapse:collapse;border-spacing:0}

fieldset,img{border:0}

Legend{display:none;}

A:active,a:focus{outline:none;}

Address,cite,dfn,em,var{font-style:normal}

Code,kbd,pre,samp{font-family: ' Courier New ', courier,monospace}

input,button,textarea,select{font-size:100%}

ABBR[TITLE]{BORDER-BOTTOM:1PX Dotted;cursor:help}

A{text-decoration:none;}

BODY,INPUT,BUTTON,TEXTAREA,SELECT,OPTION,OPTGROUP{FONT:12PX/1 Tahoma,\5b8b\4f53,sans-serif}

Header,footer,nav,article,aside,section,figure,figcaption{display:block;}

. Clear{zoom:1;}

. Clear:after{visibility:hidden;display:block;font-size:0;content: "\0020"; clear:both;height:0;}

/*s body*/

Body{width:100%;height:100%;background: #CCFFFF;}

/*s conent*/

. content{width:100%;}

/*s #top */

#top {width:100%;p osition:absolute;left:0;top:0;}

. Top_bar{width:100%;height:40px;background:rgba (0,0,0,.5); line-height:40px;}

. Top_bar a{margin-left:10px;color: #fff;}

/*s #main */

. Floatleft{float:left;display:inline;}

#main {Width:800px;height:600px;position:absolute;left:50%;top:50%;margin-left:-400px;margin-top:-300px;o Verflow:hidden;zoom:1;}

#main a{display:block;color: #fff; text-align:center;font-size:16px;}

. cont1{width:400px;}

. cont2,.cont3{width:200x;}

. Cont1-1{overflow:hidden;zoom:1;}

. Cont1-1-1{width:200px;height:300px;background: #666666;}

. Cont1-1-1 a{width:200px;height:300px;line-height:300px;}

. cont1-1-2-1,.cont1-1-2-2{width:200px;height:150px;}

. Cont1-1-2-1{background: #999999;}

. Cont1-1-2-2{background: #CCCCCC;}

. cont1-1-2-1 a,.cont1-1-2-2 a{width:200px;height:150px;line-height:150px;}

. Cont1-2-1{width:400px;height:150px;background: #FF0000;}

. cont1-2-1 a{width:400px;height:150px;line-height:150px;}

. Cont1-2-2{overflow:hidden;zoom:1;}

. cont1-2-2-1,.cont1-2-2-2{width:200px;height:150px;}

. Cont1-2-2-1{background: #00FF00;}

. Cont1-2-2-2{background: #0000FF;}

. cont1-2-2-1 a,.cont1-2-2-2 a{width:200px;height:150px;line-height:150px;}

. cont2-1-1,.cont2-1-2,.cont2-2-1,.cont2-2-2{width:200px;height:150px;}

. Cont2-1-1{background: #FFFF00;}

. Cont2-1-2{background: #00FFFF;}

. Cont2-2-1{background: #FF00FF;}

. Cont2-2-2{background: #999999;}

. cont2-1-1 a,.cont2-1-2 a,.cont2-2-1 a,.cont2-2-2 a{width:200px;height:150px;line-height:150px;}

. cont3-1,.cont3-2{width:200px;height:300px;}

. Cont3-1{background: #0000FF;}

. Cont3-2{background: #666666;}

. cont3-1 a,.cont3-2 a{width:200px;height:300px;line-height:300px;}


/* Screen size is less than 768px */

@media (max-width:768px) {

#main {width:600px;height:600px;margin-left:-300px;}

. cont1-1-1{width:200px;height:250px;}

. Cont1-1-1 a{width:200px;height:250px;line-height:250px;}

. cont1-1-2-1,.cont1-1-2-2{width:200px;height:125px;}

. cont1-1-2-1 a,.cont1-1-2-2 a{width:200px;height:125px;line-height:125px;}

. cont1-2-1{width:400px;height:125px;}

. cont1-2-1 a{width:400px;height:125px;line-height:125px;}

. cont1-2-2-1,.cont1-2-2-2{width:200px;height:125px;}

. cont1-2-2-1 a,.cont1-2-2-2 a{width:200px;height:125px;line-height:125px;}

. cont2-1-1,.cont2-1-2,.cont2-2-1,.cont2-2-2{width:200px;height:125px;}

. cont3{float:none;overflow:hidden;zoom:1;width:600px;}

. Cont3-1,.cont3-2{width:300px;height:100px;float:left;display:inline;}

. cont2-1-1 a,.cont2-1-2 a,.cont2-2-1 a,.cont2-2-2 a{width:200px;height:125px;line-height:125px;}

. cont3{float:none;overflow:hidden;zoom:1;width:600px;}

. cont3-1 a,.cont3-2 a{width:300px;height:100px;line-height:100px;}

}

/* Screen size is less than 480px */

@media (max-width:480px) {

#top {display:none;}

#main {width:320px;height:560px;margin-left:-160px;margin-top:-280px;}

. cont1-1-1{width:160px;height:200px;}

. cont1-1-2-1,.cont1-1-2-2{width:160px;height:100px;}

. cont1-2-1{width:320px;height:100px;}

. cont1-2-2-1,.cont1-2-2-2{width:160px;height:100px;}

. Cont1-1-1 a{width:160px;height:200px;line-height:200px;}

. cont1-1-2-1 a,.cont1-1-2-2 a{width:160px;height:100px;line-height:100px;}

. cont1-2-1 a{width:320px;height:100px;line-height:100px;}

. cont1-2-2-1 a,.cont1-2-2-2 a{width:160px;height:100px;line-height:100px;}

. Cont2,.cont3{width:320px;overflow:hidden;zoom:1;}

. Cont2-1-1,.cont2-1-2,.cont2-2-1,.cont2-2-2{width:80px;height:80px;float:left;display:inline;}

. Cont3-1,.cont3-2{width:160px;height:80px;float:left;display:inline;}

. cont2-1-1 a,.cont2-1-2 a,.cont2-2-1 a,.cont2-2-2 a{width:80px;height:80px;line-height:80px;}

. cont3-1 a,.cont3-2 a{width:160px;height:80px;line-height:80px;}

}


The above three-level conversions correspond to the following three diagrams respectively:

1, 650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/5B/65/wKiom1UH0oDjoxxgAAD1qS_Q45c224.jpg "title=" Mtcx-1.jpg "alt=" Wkiom1uh0odjoxxgaad1qs_q45c224.jpg "/>

2.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/5B/60/wKioL1UH08HgISStAADAz702lbA520.jpg "title=" Mtcx-2.jpg "alt=" Wkiol1uh08hgisstaadaz702lba520.jpg "/>

3.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/5B/65/wKiom1UH0sDBP3glAAChTLe3dXg742.jpg "title=" Mtcx-3.jpg "alt=" Wkiom1uh0sdbp3glaachtle3dxg742.jpg "/>

Media queries are a very popular form of responsive design at the moment. Its core is to understand the size of each device, and layout problems.

This article is from the "focus on Technology focus Front" blog, be sure to keep this source http://oxoxo.blog.51cto.com/9301862/1621451

Small instance of response design for media query---

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:
aws small instance price network design proposal for small office instance of dns query response instance of class instance of interface sql server instance name query
Related Article
mediacodec:h264 Hard decode Core code summary __ Streaming Media
Database Backup and restore of SQL Server database ____ Resto...
Using Nginx to build live streaming media platform
RTP Streaming Media
General Media Player (updated in 5.5)
Media Player Code conforming to web standards

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