Responsive web Design

All about media: Css2 and CSS3

Http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml

Site brocade Using Media queries

http://mediaqueri.es/

Mu class net

Viewport represents the viewable area, usually, if the content in the viewport is not set by the Apple phone, our width:980px will be reduced by one and then look normal.

But if the width of the width:320, it will be reduced by one times, than it is difficult to see.

If the content here is set to the width of the device, and the multiple of the zoom is set to 1 (1 means no scaling), it's ready.

==============================

==============================

=============================

Dpi:dots per inch

Aspect-ratio the visible window aspect ratio. The minimum and maximum aspect ratios are also supported.

Device-aspect-ratio device's aspect ratio (including browser information, etc.). ）

Orientation

Transverse (landscape) and Vertical (portrait)

@media (Orientation:landscape) {
body{
Backgound: #27ae60;
}
}

@media (max-height:480px)
@media (max-device-height:480px)

@media screen and (max-resolution:150dpi) {}

@media screen and (-webkit-device-pixel-ratio:1) {
}

@media screen and (Resolution:1 dppx) {
}

@media screen and (min-width:480px) and (max-width:767px) {}

@media not-screen and (max-resolution:150dpi) {}//calculates the condition behind, and then calculates not.

Responsive layout-device pixel density test

Http://www.gbtags.com/gb/share/5307.htm

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

When the large size, write dead high width, when the small size of the time,% of the fixed width.

When it is less than 767, 100%; remove the float first.

=================================

=================================

=================================

: hover replaced by: Targer Pseudo class.

Responsive web Design