css不同分辨率

最新推荐文章于 2024-03-20 16:42:15 发布

何包蛋加条腿

最新推荐文章于 2024-03-20 16:42:15 发布

阅读量1.8k

点赞数

分类专栏：前端网页

本文链接：https://blog.csdn.net/he_caihua/article/details/88733899

版权

前端网页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css不同分辨率的设置

CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。

利用css的属性

@media screen and (判断属性){ CSS样式选择器 }

HTML代码如下：

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} 
} 
/* css 注释说明：设置了浏览器宽度不小于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> 
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]--> 
</head> 
<body> 
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> 
</body> 
</html>

何包蛋加条腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css不同分辨率

css不同分辨率的设置CSS DIV网页布局中当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度，当分辨率大于1024px时候显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化（网页宽度自动随浏览器显示宽度而变宽变窄）。利用css的属性@media screen and (判断属性){ CSS样式选择器 }HTML代码如...
复制链接

扫一扫