你不知道的css各类布局(四)之响应式布局
2023-09-27 14:26:39 时间
响应式布局
概念
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局
布局特点
响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的Web浏览器等等)都能显示出令人满意的效果,对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+自适应
布局。分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。即:创建多个流体式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局
和自适应布局设计理念的融合。由于浏览器的宽度的增加或减小,响应式布局可以像流式布局一样灵活伸缩。如果浏览器在固定的宽度之间来回切换,页面元素依然可以根据media query里样式的指引做出动态改变。
每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
设计方法
媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
移动端优先策略
典型的响应式布局通常都是采用手机端优先的策略。也就是说设计最初永远是先满足于手机端,然后随着浏览器宽度增加逐渐适应平板和桌面,因此设计者就只需要找到方法去扩展手机端的布局就好了。这样是为了从整体上创建一种比较
好的用户体验,因为从手机端到桌面端的扩展要比从桌面到手机屏幕容易的多。
注意
响应式页面在头部会加上这一段代码:
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
|
优点
-
适应pc和移动端,如果足够耐心,效果完美。
缺点
-
媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。
-
要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。
参考
布局的几种方式(静态布局、自适应布局、流式布局、响应式布局、弹性布局)
相关文章
- 日前、日内两阶段需求响应热电综合能源联合调度研究(Matlab代码实现)
- 响应式开发中合理选定CSS媒体查询分割点
- vue2.0源码分析之理解响应式架构
- fiddler查看IP地址和请求响应时间
- CSS中响应式开发—几个概念,开发原理,媒体查询,代码演示
- Java Socket应用(六)——服务器响应客户端
- HTML & CSS – Responsive Image 响应式图片 (完整版)
- html : 九宫格(响应式)
- Spring Cloud Gateway-ServerWebExchange核心方法与请求或者响应内容的修改(下)
- 一次 HTTP 请求响应过程的完整解析
- Gradify - 提取图片颜色,创建响应式的 CSS渐变
- SpaceBase – 基于 Sass 的响应式 CSS 框架
- Schema – 模块化,响应式的前端开发框架
- Flask Response响应(flask中设置响应信息的方法,返回json数据的方法)
- 响应式布局@media screen and ( max-width: 像素值 ) {}
- 16.div+css实战五 阿里云src响应中心底部制作
- 12.div+css实战一 阿里云src响应中心头部