前端响应式布局的本质
2023-09-14 09:08:35 时间
前端响应式布局的本质
也即自适应各种平台,例如电脑端显示应有的样式、移动端显示应有的样式;
浏览器窗口大小变化时,显示该大小应有的样式。
BootStrap的本质(源码),都是通过各种 CSS 样式实现的。
简单实现响应式布局
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应式布局本质</title> <!--简单实现响应式布局--> <style> body{ margin: 0; } .pg-header{ background-color: red; height: 50px; } /*浏览器窗口宽度大于768,背景色变为 green*/ @media (min-width: 768px) { .pg-header{ background-color: green; } } /*浏览器窗口宽度大于992,背景色变为 pink*/ @media (min-width: 992px) { .pg-header{ background-color: pink; } } </style> </head> <body> <div class="pg-header"></div> </body> </html> 响应式布局实现
相关文章
- EDM响应式邮件框架:MJML
- 【响应式编程的思维艺术】 (1)Rxjs专题学习计划
- 请求与响应的装饰)
- ⑨小姐,你化妆了吗(请求与响应的装饰)
- 前端面试题:http 常见的响应状态码 ?
- 171. SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解
- SAP ABAP Gateway 系统里 HTTP 请求响应头部字段 DataServiceVersion 的可能取值范围
- CRM Fiori launchpad请求响应结果的字段分析
- 微信小程序开发系列 (三) :微信小程序如何响应用户点击事件和微信平台 API 的使用方法介绍
- 关于Angular使用http发送请求后的响应处理
- 基于数据驱动的智能空调系统需求响应可控潜力评估研究(Matlab代码实现)
- 【响应式编程的思维艺术】 (2)响应式Vs面向对象
- QFileDialog打开本地对话框无响应不弹出本地文件夹窗口
- AndroidAndroid程序提示和消息button响应事件
- 在Azure Sentinel中使用带自动化规则的剧本playbook——看来调查取证和响应是分开的,调查取证使用图谱便于人工来做
- 2022年全国职业院校技能大赛中职组网络安全竞赛——应急响应解析(超详细)