<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Media Queries模块</title>
<style>
@media screen and (min-width:260px){
.box{
background:#f60;
width:400px;
height:1000px;
}
}
@media screen and (min-width:600px){
.box{
background-color:#60f;
width:600px;
height:1000px;
}
}
@media screen and (min-width:800px){
.box{
background:#6f0;
width:800px;
height:1000px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<style>
html{ font-size:62.5%;}
body{
margin:20px 0;}
.box{
width:960px;
margin:0 auto;}
.content{
width:740px;
float:left;}
p{
line-height:600px;
text-align:center;
font-size:3rem;
font-weight:bold;
margin: 0 0 20px 0;
color:#fff;}
.cont{
width:520px;
float:right;
background:#656aba;}
.left{
width:200px;
float:left;
background:#ff2dc4;}
.right{
width:200px;
float:right;
background:#41db50;}
@media screen and (min-width:1000px){
.box{ width:1000px;}
.content{ width:780px; float:left;}
.cont{ width:560px; float:right;}
.left{ width:200px; float:left;}
.right{ width:200px; float:right;}
}
@media screen and (min-width:640px) and (max-width:999px){
.box{ width:640px;}
.content{ width:640px; float:none;}
p{ line-height:400px;}
.cont{ width:420px; float:right;}
.left{ width:200; float:left;}
.right{
width:100%;
float:none;
clear:both;
line-height:150px;}
}
@media screen and (max-width:639px){
.box{ width:100%;}
.content{ width:100%; float:none;}
p{ line-height:300px;}
.cont{ width:100%; float:none;}
.left{ width:100%; float:none;}
.right{
width:100%;
float:none;
clear:both;
line-height:150px;}
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<p class="cont">cont</p>
<p class="left">left</p>
</div>
<p class="right">right</p>
</div>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<style>
body{
margin:20px 0;}
.box{
width:960px;
margin:0 auto;}
.content{
width:740px;
float:left;}
p{
line-height:600px;
text-align:center;
font-size:2em;
font-weight:bold;
margin: 0 0 20px 0;
color:#fff;}
.cont{
width:520px;
float:right;
background:#656aba;}
.left{
width:200px;
float:left;
background:#ff2dc4;}
.right{
width:200px;
float:right;
background:#41db50;}
/*大于1000px的时候*/
@media screen and (min-width:1000px){
.box{ width:1000px;}
.content{ width:780px; float:left;}
.cont{ width:560px; float:right;}
.left{ width:200px; float:left;}
.right{ width:200px; float:right;}
}
/*最大不超过999像素 最小不小于640px*/
@media screen and (min-width:640px) and (max-width:999px){
.box{ width:640px;}
.content{ width:640px; float:none;}
p{ line-height:400px;}
.cont{ width:420px; float:right;}
.left{ width:200; float:left;}
.right{
width:100%;
float:none;
clear:both;
line-height:150px;}
}
/*最大不超过639px*/
@media screen and (max-width:639px){
.box{ width:100%;}
.content{ width:100%; float:none;}
p{ line-height:300px;}
.cont{ width:100%; float:none;}
.left{ width:100%; float:none;}
.right{
width:100%;
float:none;
clear:both;
line-height:150px;}
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<p class="cont">cont</p>
<p class="left">left</p>
</div>
<p class="right">right</p>
</div>
</body>
</html>
效果图：
相关推荐
在网页设计中，"div宽度自适应布局(左边自适应)"是一种常见的网页布局技术，它主要应用于响应式设计，使得页面在不同设备和屏幕尺寸下都能保持良好的视觉效果。这种布局方式强调左侧内容的宽度根据浏览器窗口大小...
这通常通过媒体查询（media queries）、百分比单位、Flexbox或CSS Grid等技术实现。在"可缩放、拖动、自适应布局组件"中，元素的大小和位置会根据屏幕尺寸的变化进行相应的调整，确保在不同设备上都能保持良好的...
通常，响应式布局会采用媒体查询（Media Queries）来定义不同屏幕尺寸下的样式规则，使页面元素在不同环境下都能正确显示。在这个模板中，页面被划分为两列，这样的设计有利于内容的展示和用户的阅读体验。 HTML5的...
京东移动端自适应布局的设计与实现，就是针对这一目标而进行的技术探索。这篇文章将深入探讨如何利用HTML5的新特性、CSS3的强大功能，以及iscroll这样的屏幕滚动插件，来打造一个流畅、适应各种设备的京东移动商城。...
这种布局方式是基于百分比或者媒体查询（Media Queries）来设置元素宽度，使得网页可以根据浏览器窗口或设备屏幕的宽度自动调整其布局。在移动优先的设计策略中，宽度自适应布局是必不可少的，因为它可以确保在桌面...
在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...
在自适应设计中，CSS3引入了几种关键的技术，如媒体查询（Media Queries）、Flexbox（弹性盒模型）和Grid Layout（网格布局）。媒体查询允许我们根据设备的特定特性，如宽度、高度或方向，应用不同的样式规则。例如...
自适应布局的核心技术包括媒体查询（Media Queries）、流式布局（Fluid Grids）和弹性图片（Flexible Images）。这些技术使得网页元素能够灵活地适应不同的屏幕尺寸，从而提供良好的可读性和可操作性。 1. 媒体查询...
首先，CSS3中的媒体查询（Media Queries）是实现自适应布局的关键。媒体查询允许我们根据设备特性，如视口宽度、设备像素比等，应用不同的CSS样式。例如，我们可以定义针对手机、平板电脑和桌面电脑的不同布局，以...
CSS3的媒体查询（Media Queries）是实现响应式设计的关键工具。通过设置不同的样式规则，根据设备的特性（如宽度、高度、分辨率等）来应用相应的样式，使页面能够自动调整布局。 接下来，我们关注CSS3中的Flexbox...
通过使用媒体查询（Media Queries）、百分比单位、弹性盒模型（Flexbox）或者网格系统（Grid），开发者可以实现页面元素在不同屏幕尺寸下的灵活布局。 接下来，我们讨论一下“字数自适应”。在物流页面中，可能会...
4. **媒体查询（Media Queries）**：配合CSS3的媒体查询，开发者可以根据设备的屏幕尺寸和方向应用不同的样式，进一步实现布局的自适应。 5. **响应式图片（Responsive Images）**：`flexible.js` 也可能包含对响应...
从最开始的静态布局到流式布局、自适应布局、响应式布局以及弹性布局，每种布局都有其独特的优势与应用场景。本文将详细介绍一种适用于PC端大屏监控及移动端布局的解决方案——REM与VW布局相结合的方式。 #### 布局...
同时，自适应布局的实现往往离不开HTML5的响应式设计元素，如`<meta>`标签中的viewport设置，以及媒体查询（media queries）的应用。 接着，CSS（层叠样式表）在模版中起到美化和布局的作用。模版的自适应性主要...
开发者可能利用媒体查询（Media Queries）来检测设备特性，然后根据屏幕宽度调整布局。例如，对于小屏幕设备，可能会将水平布局改为垂直布局，或者隐藏某些在小屏幕上不重要的元素。 项目中的"win10web"文件很可能...
自适应布局通常基于响应式设计（Responsive Web Design）的理念，通过使用媒体查询（Media Queries）、流式布局（Fluid Grids）和弹性图片（Flexible Images）等技术，实现内容在不同屏幕尺寸下的适配。对于移动端...
Bootstrap使用了媒体查询（Media Queries）来实现响应式设计，通过设置不同的断点来控制页面布局的变化。 现在，让我们来分析 Bootstrap 实现的自适应页面简单应用示例。该示例使用了Bootstrap的导航栏（Navbar）...
自适应布局与响应式布局相似，都是针对不同设备进行布局调整。但自适应布局更注重预定义的断点，而不是连续的调整。在特定的断点处，页面的布局会突然改变。比如，我们可以为大屏、平板和手机设备设定不同的布局...
3. **媒体查询（Media Queries）**：对于响应式设计，媒体查询是必不可少的工具，它允许我们根据设备的特性（如屏幕宽度）来应用不同的CSS规则，确保在不同设备上都有良好的显示效果。 4. **Bootstrap框架**：...