响应式设计
flexbox兼容问题
关于响应式·设计的思考
重新布局,显示与隐藏
弹性图片。
百分比布局
响应式设计-常见
响应式设计-媒体查询
兼容属性替换
兼容性问题
响应式设计 主要是媒体查询 @media screen and (max-width:1024px){}
Flexbox
响应式:
1- 根据尺寸:有的需要:display:none;
2- 如果有的元素的padding-left;margin-left需要改的话 设置为绝对定位 提高渲染性能
图片的弹性布局总结
弹性图片:
1- 图片: width: 100%; height: 100%
2- 图片需要放在一个容器中: 容器可以做响应式的宽高
使用媒体查询:
1- 请使用百分比布局
媒体查询的类型
新旧 flexbox
关于响应式设计的思考
响应式布局
设计点三:重新布局,显示与隐藏
响应式布局
设计点二:弹性图片
响应式设计
设计点一:百分比布局
响应式设计 媒体类型 常用媒体查询参数
响应式设计:在所有设备都能完美展示
媒体查询
新旧版本flexbox布局
Flexbox弹性盒子布局的兼容性