响应式布局@media screen and ( max-width: 像素值 ) {}
响应 and 布局 max 像素 Media Screen width
2023-09-27 14:27:48 时间
设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024px的时候,则通过Media Query预设的样式表来将页面的宽度设置为百分比显示,这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理,当浏览器的可视区域改变到某个值(假如为650px)的时候,页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子:
/* 当浏览器的可视区域小于980px */
@media screen and ( max-width: 980px ) {
#wrap {width: 90%; margin:0 auto;}
#content {width: 60%;padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%;margin-bottom: 10px;}
}
/* 当浏览器的可视区域小于650px */
@media screen and ( max-width: 650px ) {
#header {height: auto;}
#searchform {position: absolute;top: 5px;right: 0;}
#content {width: auto; float: none; margin: 20px 0;}
#sidebar {width: 100%; float: none; margin: 0;}
}
相关文章
- DNS服务器不能响应的四大解决办法
- 在 Confluence 中启用 HTTP 响应压缩
- 考虑阶梯式碳交易与供需灵活双响应的综合能源系统优化调度(Matlab代码实现)
- thinkphp 响应对象response
- 12款免费的 WordPress 响应式主题下载
- 10个漂亮的响应式的食品 WordPress 美食模板
- Ink – 帮助你快速创建响应式邮件(Email)的框架
- 云盾WAF实现虚拟补丁——记一起Web漏洞应急响应
- Unity+Pico 响应射线事件
- FastAPI 学习之路(十四)响应模型
- 学习ASP.NET Core, 怎能不了解请求处理管道[3]: 自定义一个服务器感受一下管道是如何监听、接收和响应请求的
- 信息安全技术——(七)安全防护与应急响应技术
- 应急响应 Windows和Linux操作系统(查杀 后门木马,处理 勒索病毒.)
- 我的Android进阶之旅------>Android发送GET和POST以及HttpClient发送POST请求给服务器响应