素材巴巴 > 程序开发 >

前端-响应式布局

程序开发 2023-09-17 15:09:31

响应式基本语法

响应式布局的优缺点

优点:面对不同分辨率设备,灵活性强,能够快捷地解决设备显示适应问题

缺点:兼容各种设备时所需工作量大丶效率低下丶代码累赘,会隐藏无用的元素,加载时间延长,
其实这是一种折中性质的设计解决方案,由于多方面元素影响而达不到最佳效果,在一定程度上
改变了网站原有的布局结构,会出现用户混淆的情况


 
 

页面效果:
随浏览器窗口大小缩小div背景色在临界值发生改变

响应式外部样式


 
 

这里写图片描述

这里写图片描述

如何创建响应式布局


 响应式布局基本语法为
 @media screen and ()
 括号内填写不同的分辨率大小,且响应式布局语法间需空格隔开否则语法错误对于项目的响应式布局一般用外部样式,在link标签引入CSS样式中添加属性media
 具体为media="screen and (分辨率条件)"

标签:

上一篇: vue键盘回车请求 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。