-
Media properties to be added before use priority code is compatible with mobile devices
<Meta name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0, maximum-Scale = 1.0, User-Scalable =" NO "> / * Parameters: - width = Device-width: a width equal to current device width - initial-scale: initial zoom ratio of column (default 1.0) - scale-maximum: maximum zoom ratio of the column allows a user (default 1.0) - user-Scalable: whether to allow manual scaling (default is NO) * /
-
Use Media Properties: <style> in the implementation of media queries
@media mediatype and ( media feature ){ CSS-Code; }
Parameter Description:
mediatype in w3c standards, only all, print, screen, speech (screen readers used in sound equipment, etc.) These four media types can still> Use
aspect-ratio is defined in a page output device visible region of width to height ratio of
color definition of each group number output device of a color original. If the device is not a color, then the value is equal to 0
color-index defines the number of entries in the color look-up table in the output device. If you do not use a color lookup table, the value is equal to 0
device-aspect-ratio screen definition visible output devices of the ratio of width to height.
device-height screen definition output device visible height.
device-width screen definition visible width of the output device.
grid used to query whether the output device using a grid or lattice.
height defined output device highly visible area of the page.
max-aspect-ratio screen definition visible output devices of width to height ratio of the maximum.
max-color defines the maximum number of output devices of each group of color originals.
max-color-index defines the maximum number of entries in the color look-up table in the output device.
max-device-aspect-ratio screen definition visible output devices of width to height ratio of the maximum.
max-device-height definition of the output screen of the device visible to the maximum height.
max-device-width screen definition of the maximum widths of the visible output devices.
max-height page definition of the maximum height of the visible region of the output device.
max-monochrome maximum number defined in a monochrome original monochrome frame buffer included in each pixel.
max-resolution maximum resolution defined devices.
max-width page width defines the maximum visible area of the output device.
min-aspect-ratio is defined in the output device region pages visible minimum ratio of width to height.
min-color defined minimum number of output devices of each group of color originals.
min-color-index defines the minimum number of entries in the color look-up table in the output device.
min-device-aspect-ratio screen definition output device visible minimum ratio of width to height.
min-device-width screen definition minimum visible width of the output device.
min-device-height with a minimum screen output apparatus defined highly visible.
min-height definition of the output device in the visible region of the minimum height of the page.
min-monochrome minimum number of monochrome originals are defined in a single color per pixel frame buffer included
min-resolution minimum resolution defined devices.
min-width defines the minimum output device in the visible region of the page width.
monochrome number defined in a monochrome original monochrome frame buffer included in each pixel. If the device is not monochromatic, the value is equal to 0
orientation defined output device visible area page height greater than or equal width.
resolution resolution defines the device. Such as: 96dpi, 300dpi, 118dpcm
scan the definition television type scanning process equipment.
width defined output device pages visible region width.
Note: If you want to define a plurality of condition statement, and the connection may be used, and a trailing space forget
example: @media screen and (min-width : 960px, max-width: 1200px) {}
-
In response to the practical application layout
HTML code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>响应式布局实际应用</title> <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" /> <meta name="format-detection" content="telephone=no,email=no"/> <link rel="stylesheet" type="text/css" href="css/mo2.css"/> </head> <body> <div> <header id="head"> <ul> <li>header1</li> <li>header2</li> <li>header2</li> <li>header2</li> <li>header2</li> </ul> <div>icon</div> </header> <section id="main"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div> </section> <footer id="foot"> footer </footer> </div> </body> </html>
CSS code:
*{ margin: 0px; padding: 0px; font-family: "微软雅黑"; } #head, #foot, #main { height: 100px; width: 1200px; /*width: 85%;*/ background-color: #3d4043; text-align: center; font-size: 48px; line-height: 100px; margin: 0 auto; color: #fff; } #head div{ display: none; font-size: 20px; height: 30px; width: 100px; background-color: #5dcff4; float: right; line-height: 30px; margin-top: 35px; } #head ul{ width: 80%; margin-left: 10%; } #head ul li{ width: 20%; float: left; text-align: center; list-style: none;font-size: 20px; } #main{ height: auto; margin: 10px auto; overflow: hidden; } .left, .center, .right{ height: 600px; line-height: 600px; float: left; width: 20%; background-color: #954ea6; } .center{ width: 60%; border-left: 10px solid #FFF; border-right: 10px solid #FFF; box-sizing: border-box; } @media only screen and (max-width: 1200px) { #head, #foot, #main{ width: 100%; } } @media only screen and (max-width: 980px) { .right{ display: none; } .left{ width: 30%; } .center{ width: 70%; border-right: hidden; } } @media only screen and (max-width: 640px) { .left, .center, .right{ width: 100%; display: block; height: 200px; line-height: 200px; } .center{ border: hidden; border-top: 10px solid #FFFFFF; border-bottom: 10px solid #FFFFFF; height: 600px; line-height: 600px; } #head ul{ display: none; } #head div{ display: block; } }