响应式的处理方法：
1.media query自动的切换不同分辨率
2.css内的媒体查询，类似诸多断点@media all and (min-width: 480px) and (max-width: 767px){ ... }
3.兼容全球主流框架Bootstrap
响应式详细分类【】
移动端的处理方法：
结合rem进行大小的定义，能够让页面自动识别分辨率换算实际尺寸
共同点:
无论是css文件根据断点定义，还是识别分辨率自动换算，都涉及到多种尺寸下的图片尺寸变化，
对于<img>的标签处理：
对于图片的考虑应该从布局设计就开始。
1.从设计角度，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间，这样可以有效的减少图片放大模糊的问题。
2.从代码角度，方式应该对img标签外层，包裹一层div或是特殊点击效果的a标签,尺寸变化体现在布局上，img永远100%的填充布局区域
定义方式出于如下几点：
- html语义化，简单来说每个标签有自己的语义解释，比如段落、表格、图片、标题，里面也会分为结构布局类，文本类等，语义化本身就是为了能够方便浏览器读取解释和加载，而且语义化良好的页面也利于搜索引擎的识别。
- 内容与样式分离，页面制作时暂时不用考虑它的最终呈现会是什么样子，先将内容本身的语义合理地表述出来，利用结构布局类元素定义页面排版（常用的结构标签就是div、ul..）嵌入合理的内容，之后再为不同的用户代理设计不同的样式描述。
基于以上两点，制作方式由外向内，结构布局延伸到具体内容的方式定义页面内容，其后由外向内定义样式。
对于图片尺寸的变化，应该定义在外裹得一层div或是特殊标签a上。定义容器的尺寸不停变化，图片永远100%撑满。
--- html语义化
img是特殊的行级元素标签，虽然可以定义宽高，但是本身语义角度上作为行级元素加载出现， 样式定义img身上，结构布局要另外定义
--- 减少维护排查
如果全部定义子在img身上，维护和修复的排查要顾及两项，大小样式和结构布局，之间会有连带影响，比如绝对定位，而把结构布局定义在外层父元素身上，则可以避免问题或是遗漏
--- 减少代码工作
当涉及到断点或是特殊断点时，追加的判别分辨率css的复写代码，只需要对结构的宽度重新复写，而不用考虑img图片本身，即使某个图片需要特殊处理，也不会影响全局大小
网友评论