响应式设计

媒体查询
 
@media screen and (max-1024px) {
}
 
媒体类型:                                        常用媒体查询参数
screen (屏幕)                                   width——— 视宽高
print 打印机                                     height———视口宽高
handheld 手持设备视                       device-width ———设备的宽度
all  通用                                             device-height——— 设备的高度
                                                          orientation 检查设备处于横向(landscape)还是竖屏(portrait)
 
设计点一 : 百分比布局
设计点二:  弹性图片
img {
     max- 100%;
}
1: 同比例缩减元素尺寸
2: 调整页面结构布局
3: 隐藏冗余的元素
注: 经常需要切换位置元素使用[绝对定位],减少重绘提高渲染性能
 
原文地址:https://www.cnblogs.com/tian-sun/p/7404221.html