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

Posted -簡單-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式布局@media screen and ( max-width: 像素值 ) {}相关的知识,希望对你有一定的参考价值。

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

以上是关于响应式布局@media screen and ( max-width: 像素值 ) {}的主要内容,如果未能解决你的问题,请参考以下文章

精简 - bootstrap响应式自定义屏宽限制 - css - @media screen and ( max-width: 767px) {}

响应式布局

响应式布局

响应式布局

网页布局——响应式布局

@media screen 针对不同移动设备——响应式设计