当前位置:网站首页>17-响应式布局
17-响应式布局
2022-08-11 11:51:00 【CapejasmineY】
一、常见布局方案
布局响应:随着屏幕的宽度响应最美的展示方式
原则:
1、布局不变,挤压显示——布局不变
2、平铺展示,一行内容变成两行三行展示——布局不变
3、删减、增加内容——布局不变
4、模块位置变换——布局改变
5、隐藏-展开,例如隐藏导航栏为小图标,点击小图标展开进行选择——布局改变
二、媒体查询
1、含义
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向和纵向)为其设定css样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。
查询结构:
@media all and (min-width:320px){
body{background-color:red;}
2、设备类型
用法:
//pc客户端或大屏幕设备,大于1028px时
@media only screen and (min-width:1029px){}
//竖屏
@media screen and (orientation:portrait) and (max-width:120px){}
//横屏
@media screen and (orientation:landscape){}
3、断点
在屏幕达到多少分辨率时应用某种样式
orientation属性根据屏幕长宽检测竖直还是水平
4、优缺点
3、
边栏推荐
猜你喜欢
资本市场做好为工业互联网“买单”的准备了吗?
edusoho兑换码功能二次开发
Five minutes to teach you intranet penetration
黑海港口外运农产品问题联合协调中心:正努力加速粮食外运
[The sword refers to the offer-Nioke.com brush questions] The first article - Fibonacci sequence - C implementation
PlutoSDR学习指南【0】PlutoSDR介绍
为什么最好的光刻机来自荷兰,而不是芯片大国美国?
The old saying: The interview must ask "Three handshakes, four waves", so you can't forget it
Flutter 教程之 Kotlin 多平台与 Flutter,为您的应用选择哪一个
谷歌搜索,全球宕机??
随机推荐
如何用100元制作一块全志V853的AI 开发板
六月成功案例
条件竞争 && pipe_buffer + 堆喷射
微服务分布式构架开发实战PDF,阿里架构师推荐,快快收藏吧
陕西cas:2055042-71-0N-(炔-四聚乙二醇)-生物素价格
《公共管理学》重点总结-陈振明版
Visual Studio: Arm64EC官方支持来了
d共享左值
NLP标注工具Brat的简单使用
39页智慧粮库解决方案
FS2956A 输入8-120V 用于液晶仪表5V-USB 充电口方案
A043:做好芯片设计,这三种能力不可或缺
SH7001单电池恒压线性充电IC
【学生个人网页设计作品】使用HMTL制作一个超好看的保护海豚动物网页
TiSpark 原理之下推丨TiDB 工具分享
C-V2X八大误区澄清和发展辩思
威佐夫博弈
Codeforces Global Round 15 (A-F)
网络安全——nmap
自动售货机