响应式布局-图片自适应与响应式

Posted 2020-07-11 zhanghuiyun

响应式布局：

1、保有足够的留白，但也几乎不浪费屏幕面积

2、该考虑的内容：@百分比的布局以及em布局，随屏幕宽度变化的间距

                        @文本换行

                        @图片需被替换或允许缩放

                        @忍受一个不再完美的设计

 

自适应布局：

1、可在每个突变点上，为内容区域设置一个最大宽度，然后将外间距扩张直至匹配到下一个突变点

 

搜索框：

<input type="search" >

优点：

@移动浏览器可以更改所显示的键盘

@添加一个图标

@该区域被触发时，显示搜索历史

缺点：

@擅自更改样式，匹配系统样式

 

滑块：

注意事项：

@滑块对触摸良好

@尽量少的数据量或幻灯数量

@延迟的方法加载数据

 

链接：

1、至少34 * 34 px

2、目标之间  > 8px

 

响应式图片：

1、srcset属性 -- webkit ，chrome

1 <img src="" alt="" srcset="a.jpg 480w, b.jpg 768w" />

2、picture元素

1 <picture>
2     <source srcset="">
3    <source media="(min-width : 480px)" srcset="" >
4    <img src="" alt="">
5 </picture>

3、chrome支持webp格式的图片

4、<noscript>定义在脚本未被执行时的替代内容

5、图像压缩

@png  153kb

@gif   42kb

@jpeg  30kb

@webp 18kb --- 支持动画，有损，无损   ---  chrome ，opera