请选择 进入手机版 | 继续访问电脑版

响应式布局@media screen and ( max-width: 像素值 ) {}教程

[复制链接]
查看2876 | 回复1 | 2019-7-3 06:47 | 显示全部楼层 |阅读模式
响应式布局@media screen and ( max-width: 像素值 ) {}教程


设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024px的时候,则通过Media Query预设的样式表来将页面的宽度设置为百分比显示,这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理,当浏览器的可视区域改变到某个值(假如为650px)的时候,页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子:


/* 当浏览器的可视区域小于980px */
  1. @media screen and ( max-width: 980px ) {
  2. #wrap {width: 90%; margin:0 auto;}
  3. #content {width: 60%;padding: 5%;}
  4. #sidebar {width: 30%;}
  5. #footer {padding: 8% 5%;margin-bottom: 10px;}
  6. }
复制代码


/* 当浏览器的可视区域小于650px */
  1. @media screen and ( max-width: 650px ) {
  2. #header {height: auto;}
  3. #searchform {position: absolute;top: 5px;right: 0;}
  4. #content {width: auto; float: none; margin: 20px 0;}
  5. #sidebar {width: 100%; float: none; margin: 0;}
  6. }
复制代码
苹果 | 2019-8-19 22:15 | 显示全部楼层
技术学习教程网,支持一下。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-3-24