响应式设计

媒体查询

 

@media screen and (max-width:1024px) {

}

 

媒体类型:                                        常用媒体查询参数

screen (屏幕)                                   width——— 视宽高

print 打印机                                     height———视口宽高

handheld 手持设备视                       device-width ———设备的宽度

all  通用                                             device-height——— 设备的高度

                                                          orientation 检查设备处于横向(landscape)还是竖屏(portrait)

 

设计点一 : 百分比布局

设计点二:  弹性图片

img {

     max-width: 100%;

}

1: 同比例缩减元素尺寸

2: 调整页面结构布局

3: 隐藏冗余的元素

注: 经常需要切换位置元素使用[绝对定位],减少重绘提高渲染性能