css判断不同分辨率显示不同宽度布局实现自适应宽度

最新推荐文章于 2024-05-13 09:48:28 发布
最新推荐文章于 2024-05-13 09:48:28 发布
阅读量6.9k 收藏 2
点赞数 1
分类专栏： screen自适应(适配) 文章标签： 适配 自定义 screen 自适应 浏览器

1、DIVCSS小案例描述
我们首先设置一个DIV盒子CSS命名为“.abc”，设置其高度为300px，css边框为黑色；以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。
我 们通过手动拖拽浏览器显示宽度，然后观察此盒子宽度变化情况，当浏览器宽度调节到宽度不大于500px时，对应此盒子宽度显示100px；调节浏览器宽度 不大于901px时，显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时，盒子对象宽度显示1200px；当小于 1200px时候显示宽度为900px。

?
1
2
3
4
5
6
7
8
9
10
11
12
.abc{  height : 300px ;  border : 1px  solid  #000 ;  margin : 0  auto } 
@media  screen  and ( min-width :  1201px ) { .abc { width :  1200px }  
}  /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
  
@media  screen  and ( max-width :  1200px ) { .abc { width :  900px }  
}  /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 
  
@media  screen  and ( max-width :  901px ) { .abc { width :  200px ;}  
}  /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */ 
  
@media  screen  and ( max-width :  500px ) { .abc { width :  100px ;}  
}  /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media判断CSS排错将导致判断失效。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html> <html> <head> <meta charset= "utf-8"  /> <title>无标题文档</title> <style> .abc{  height : 300px ;  border : 1px  solid  #000 ;  margin : 0  auto } 
@media  screen  and ( min-width :  1201px ) { .abc { width :  1200px }  
}  /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
  
@media  screen  and ( max-width :  1200px ) { .abc { width :  900px }  
}  /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */ 
  
@media  screen  and ( max-width :  900px ) { .abc { width :  200px ;}  
}  /* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */ 
  
@media  screen  and ( max-width :  500px ) { .abc { width :  100px ;}  
}  /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 
  </style> </head> <body> <div class= "abc" >DIVCSS 5 实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> </body> </html>

4、为了兼容IE9以下版本浏览器需要加入一个google的JS，当然可以下载引人html

?
1
2
3
<!--[ if  lt IE 9]> 
<script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script> 
<![endif]-->

5.完美兼容

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< code  class = "hljs xml"  style = "padding:10px;line-height:1.4;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;" >< span  class = "hljs-meta"  style = "color:rgb(127,159,127);" ><!DOCTYPE html></ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ><</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >html</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ><</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >head</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ><</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >meta</ span ></ span ></ span >< span  class = "hljs-tag" > </ span >< span  class = "hljs-attr" >< span  class = "hljs-tag" >< span  class = "hljs-attr" >charset</ span ></ span ></ span >< span  class = "hljs-tag" >=</ span >< span  class = "hljs-string"  style = "color:rgb(204,147,147);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-string"  style = "color:rgb(204,147,147);" >"utf-8"</ span ></ span ></ span >< span  class = "hljs-tag" > /></ span ></ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ><</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >title</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span >无标题文档< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ></</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >title</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ><</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >style</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span >< span  class = "css" >< span  class = "css" > </ span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span  class = "css" >{ </ span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >height</ span ></ span ></ span >< span  class = "css" >:</ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >300px</ span ></ span ></ span >< span  class = "css" >; </ span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >border</ span ></ span ></ span >< span  class = "css" >:</ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >1px</ span ></ span ></ span >< span  class = "css" > solid </ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >#000</ span ></ span ></ span >< span  class = "css" >; </ span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >margin</ span ></ span ></ span >< span  class = "css" >:</ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >0</ span ></ span ></ span >< span  class = "css" > auto} 
@</ span >< span  class = "hljs-keyword"  style = "color:rgb(227,206,171);" >< span  class = "css" >< span  class = "hljs-keyword" >media</ span ></ span ></ span >< span  class = "css" > screen and (min-width: </ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >1201px</ span ></ span ></ span >< span  class = "css" >) { </ span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span  class = "css" > {</ span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >width</ span ></ span ></ span >< span  class = "css" >: </ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >1200px</ span ></ span ></ span >< span  class = "css" >}  
} </ span >< span  class = "hljs-comment"  style = "color:rgb(127,159,127);" >< span  class = "css" >< span  class = "hljs-comment" >/* css 注释说明：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */</ span ></ span ></ span >< span  class = "css" > 
  
@</ span >< span  class = "hljs-keyword"  style = "color:rgb(227,206,171);" >< span  class = "css" >< span  class = "hljs-keyword" >media</ span ></ span ></ span >< span  class = "css" > screen and (max-width: </ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >1200px</ span ></ span ></ span >< span  class = "css" >) { </ span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span  class = "css" > {</ span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >width</ span ></ span ></ span >< span  class = "css" >: </ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >900px</ span ></ span ></ span >< span  class = "css" >}  
} </ span >< span  class = "hljs-comment"  style = "color:rgb(127,159,127);" >< span  class = "css" >< span  class = "hljs-comment" >/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */</ span ></ span ></ span >< span  class = "css" > 
  
@</ span >< span  class = "hljs-keyword"  style = "color:rgb(227,206,171);" >< span  class = "css" >< span  class = "hljs-keyword" >media</ span ></ span ></ span >< span  class = "css" > screen and (max-width: </ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >900px</ span ></ span ></ span >< span  class = "css" >) { </ span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span  class = "css" > {</ span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >width</ span ></ span ></ span >< span  class = "css" >: </ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >200px</ span ></ span ></ span >< span  class = "css" >;}  
} </ span >< span  class = "hljs-comment"  style = "color:rgb(127,159,127);" >< span  class = "css" >< span  class = "hljs-comment" >/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */</ span ></ span ></ span >< span  class = "css" > 
  
@</ span >< span  class = "hljs-keyword"  style = "color:rgb(227,206,171);" >< span  class = "css" >< span  class = "hljs-keyword" >media</ span ></ span ></ span >< span  class = "css" > screen and (max-width: </ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >500px</ span ></ span ></ span >< span  class = "css" >) { </ span >< span  class = "hljs-selector-class"  style = "color:rgb(239,239,143);" >< span  class = "css" >< span  class = "hljs-selector-class" >.abc</ span ></ span ></ span >< span  class = "css" > {</ span >< span  class = "hljs-attribute"  style = "color:rgb(239,220,188);" >< span  class = "css" >< span  class = "hljs-attribute" >width</ span ></ span ></ span >< span  class = "css" >: </ span >< span  class = "hljs-number"  style = "color:rgb(140,208,211);" >< span  class = "css" >< span  class = "hljs-number" >100px</ span ></ span ></ span >< span  class = "css" >;}  
} </ span >< span  class = "hljs-comment"  style = "color:rgb(127,159,127);" >< span  class = "css" >< span  class = "hljs-comment" >/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */</ span ></ span ></ span >< span  class = "css" > 
  </ span ></ span >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ></</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >style</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span > < span  class = "hljs-comment"  style = "color:rgb(127,159,127);" > <!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]--> </ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ></</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >head</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ><</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >body</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ><</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >div</ span ></ span ></ span >< span  class = "hljs-tag" > </ span >< span  class = "hljs-attr" >< span  class = "hljs-tag" >< span  class = "hljs-attr" >class</ span ></ span ></ span >< span  class = "hljs-tag" >=</ span >< span  class = "hljs-string"  style = "color:rgb(204,147,147);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-string"  style = "color:rgb(204,147,147);" >"abc"</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span >DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ></</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >div</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ></</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >body</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span > < span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-tag" ></</ span >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >< span  class = "hljs-tag"  style = "color:rgb(227,206,171);" >< span  class = "hljs-name"  style = "color:rgb(239,239,143);" >html</ span ></ span ></ span >< span  class = "hljs-tag" >></ span ></ span ></ code >

租房请下载：房东直租APP
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 @media同时对宽度width和高度height判断
滕青山博客
01-23 4393
定义 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 使用 如果需要同时对宽度width和高度height判断， 可以使用and操作符。 下面代码判断的是高度小于500px并且宽度大于600px @media screen and (max-height: 500px) and ...
大图片根据分辨率自适应宽度仍居中显示
09-25
总结来说，要实现大图片在不同分辨率下自适应宽度并居中显示，主要依赖于CSS的背景属性、定位和响应式设计策略。通过这些技术，我们可以创建一个对各种屏幕尺寸友好的网页，提供良好的用户体验。
CSS将边框border设定到宽度和高度中
热门推荐
黄晓杰Aries的专栏
11-02 3万+
今天偶遇一个css方面的问题，因为以前也为该问题苦恼过，今天得到了解决方案，而且答案很简单，就是给css加上一个属性就搞定了，由于该属性平时很少用，为了方便以后查看，特此记录。 要实现的效果图我们想实现如下效果： 一般做法那么我们如何通过使用html+css来实现这个效果呢？按照一般的思维，我们会设计出如下的代码html代码：<div class="container"> <div cla
根据浏览器窗口宽度来设置不同的css
最新发布
weixin_62438322的博客
05-13 318
在网页运行时，通常会遇到需要兼容设备分辨率的问题，我们通常采用不同的宽度设置不同的css来解决
CSS中自适应屏幕分辨率
诚的博客
04-11 1981
@media与@media screen区别 @media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。 @media (max-width: 1199){ //<=1199的设备 } @media (max-width: 991px){ //<=9...
移动端使用scss适配屏幕宽度
huahua614391996的博客
08-02 224
【代码】移动端使用scss适配屏幕宽度。
CSS自适应布局思路
09-27
通过这种方式，我们可以为不同分辨率的设备编写特定的CSS规则，以覆盖之前的样式，从而实现自适应布局。 整体布局策略通常分为几个阶段： 1. 对于0-768px的屏幕宽度，显示移动端效果，此时通常使用百分比宽度（如`...
使用CSS3MediaQueries实现网页自适应
02-25
网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。在开始之前，点击最终预览来看看它的效果。改变浏览器的宽度，你将会看到页面...
创造100% 自适应css布局的行之有效的方法
01-19
流动网页设计有很多好处，但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小... 在这篇文章，我们将讨论创造100%功能自适应css布局的行之有效的方法 一、使用网格的流动布局 我们大多数人都听说过设计固定宽度
vue实现PC端分辨率适配操作
10-15
lib-flexible是基于 Flexible+Viewport 编写的一个解决方案，它能够帮助我们根据设备的物理像素密度（DPR）和屏幕宽度（逻辑像素宽度）来动态设置html元素的font-size，从而实现不同分辨率下的适配。这个库需要在...
自适应css布局——流动布局新时代
08-18
在本文中，我们将探讨实现100%功能自适应CSS布局的有效方法。 流动布局的基本原理是利用百分比、相对单位（如em）以及智能的HTML结构来创建响应式设计。Ethan Marcotte提出的流动网格概念强调了使用相对尺寸和比例...
学习DIV+CSS网页布局之一列布局
09-24
在实际应用中，一列布局不仅限于固定宽度，还可以通过百分比宽度或者媒体查询实现自适应宽度，以适应不同分辨率的设备。例如，可以将`#main`的宽度设置为`width: 100%`，使其占据父容器的全部宽度，这样在窄屏幕设备...
jQery使网页在显示器上居中显示适用于任何分辨率
09-04
标题中的“jQuery使网页在显示器上居中显示适用于任何分辨率”指的是使用JavaScript库jQuery实现一个网页布局策略，确保网页内容无论在何种分辨率的显示器上都能保持居中对齐。这种方法对于提升用户体验至关重要，...
使用CSS3的rem属性制作响应式页面布局的要点解析
09-27
在响应式设计中，通过使用rem，我们可以确保页面元素的比例在不同屏幕尺寸下保持一致，从而实现自适应布局。 在示例项目中，开发者设置了最大宽度为640px，最小宽度为320px。通过调整浏览器分辨率或在手机上查看，...
不同分辨率的不同样式
qq_37807767的博客
07-14 434
pc不同分辨率的不同样式需求实现 需求 实际开发中，分辨率不同的情况下需要不同的样式等等…但是组件库在很多情况下一些细节并不能实现，这个时候使用媒体查询也是不错的选择 实现 比如在不同分辨率下实现不同的字体大小： <!DOCTYPE html> <html> <head> <!-- 手机端的时候需要替换为这句话 <meta name="viewport" content="width=device-width,
css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
Amen的博客
04-25 1万+
css判断不同分辨率显示不同宽度布局实现自适应宽度即 css3 @media样式的使用转自：脚本之家 【css判断不同分辨率显示不同宽度布局实现自适应宽度】 http://www.jb51.net/css/151312.htmlCSS判断不同分辨率浏览器（显示屏幕）显示不同宽度 布局CSS3技术支持IE6到IE8。 将用到css3 @media样式进行判断， 但IE9以下版本不支持CSS3技术， ...
bootstrap系列之响应式布局及相关的visible-sm、hidden-xs等的使用
极客神殿
05-23 3848
响应式布局：响应式工具不能用于table元素，而且 本身就不支持 响应式布局需要在处添加如下语句： 在css中添加如下内容 可以分别定制不同屏幕的显示样式： /* 大屏幕 ：大于等于1200px*/ @media (min-width: 1200px) { … } /默认/ @media (min-width: 980px){…} /* 平板电脑和小屏电脑之间的分辨率 */ @media (mi...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值