CSS响应式布局学习笔记三

时间:2020-10-13 作者:WilliamChan

响应式布局常用实现

  1. 流体布局
    其实就是度量单位的改变。在响应式设计的布局中,不在把像素(px)作为唯一的单位,而是采用%或者是混合%、px为单位,设计出自己想要的布局方式。
  2. 媒体查询
    媒体查询可以在你根据特定的环境下查询到各种属性———比如设备类型,分辨率、屏幕物理尺寸以及色彩等。通过使用媒体查询,可以获得设备的一些特性,以及响应式的布局方案。
  3. 弹性图片
    其实在做响应式布局时,大多用到的是弹性盒子进行布局,那么在设置图片的地方也应该具有一些变化以适应布局的变化。出了图片外,像图标啦!视频啦也应做一些调整用以适应布局的变化。

流式布局法

  1. 容器或者盒子的宽度一般都不是固定的值,而是使用百分比,相对于视口区域的百分比。
  2. 其余的样式:字体、高度、margin、padding等等都按照设计稿上标注尺寸的一半来设置。
  3. 对于有些屏幕尺寸下,设置的固定值不是特别好看的话,使用@media进行微调整。

图片处理

1. 对于背景图片来说,css3有个属性 background-size可以等比例缩放背景图片。

但是对于小屏幕的移动设备去加载大背景图片的话,有缺点的,最主要的缺点是要更大的带宽,浪费流量。所以我们要想做的更好的话,可以使用媒体查询根据设备的宽度来渲染不同大小的背景图片。

对于页面上的<img/>标签图片的话:

1. 如果只是页面上静态图片的话,不考虑带宽的情况下,可以使用width=100%”等比例缩放,如:<img src=”XX.png” width=”100%”/>

2. 如果是商品图或者页面上有多个的话,考虑不浪费不必要的带宽,需要后台根据不同的设备宽度大小来返回不同的json数据的图片来给我们前端,之后我们前端使用JS动态的渲染出来。

带宽是手机端必须要考虑的问题,如果将PC端上的大图放在手机端,手机用户请求图片文件时,文件体积大,消耗流量多,请求事件长,这样的用户体验一定不好。所以就得把图片也处理成响应式的,根据终端类型尺寸分辨率来适配出合理的图形。

有两个解决方案,一个是看到有文章介绍的W3C的一个用于响应式图形的草案:新定义标签<picture>,因为是草案可以学习学习,这里就不赘述了,自行百度谷歌bing吧~ 另一个方案是图片液态化。

在html页面中的图片,可以通过css样式max-width来进行控制图片的最大宽度。img { max-width:100%; }

含义是:确保图片的最大宽度不会超过浏览器的窗口或其容器可视部分的宽度,所以当窗口或容器的可视部分变窄时,图片的最大宽度值也会相应的变小,图片本身永远不会覆盖容器。


以上就是知道不介绍的《CSS响应式布局学习笔记三》,希望对你有所帮助。

接下来您可以移步看一下一篇《CSS响应式布局学习笔记四》。
或上一篇《CSS响应式布局学习笔记二》

声明:若您对本文内容有任何意见,欢迎发送邮件至:admin@zhidaobu.com,本站会尽快回应并做出相应处理。