• 首页
  • >
  • 响应式布局@media screen and ( max-width: 像素值 ) {}
  • >
  • 正文

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

42次阅读

设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为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;}
}

作者:管理员  修订  2019/10/17 23:54:42

WP爱好者专注WordPress在线系统培训,10年来超过十万学员在此获得技术提升和人脉圈子。

WordPress课程已融入到移动搜索、零基础建站、WP爱好者开源主题模板、SEM入门等。

欢迎添加助教微信:tc199361,马上获得优秀学员案例。