4

移动端自适应CSS不同屏幕显示不同@media screen响应式

 2 years ago
source link: https://www.chenweiliang.com/cwl-2074.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

移动端自适应CSS不同屏幕显示不同@media screen响应式

广告

2021年7月16日

移动端自适应CSS如何根据不同的分辨率显示不同@media screen 响应式布局？

移动端自适应CSS不同屏幕显示不同@media screen响应式

下面的文章将介绍如何使用CSS来判断不同的分辨率，显示不同的宽度布局来实现自适应宽度。

有需要的朋友可以参考一下，希望对大家有所帮助。 

@media与@media screen打印网页区别

  • 如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。
  • 不过这这个也不一定，其实如果把“screen”换为“print”，写为@media print，那么该CSS就可用到打印设备上了；
  • 但要注意，@media print声明的css只能在打印设备上有效哦。

1、DIVCSS小案例描述

我们首先设置一个DIV盒子CSS命名为“.abc”，设置其高度为300px，CSS边框为黑色；

  • 以及设置margin:0 auto布局居中，预先设置这两个样式是为了便于观察。

我们通过手动拖拽浏览器显示宽度，然后观察此盒子宽度变化情况：

  1. 当浏览器宽度调节到宽度不大于500px时，对应此盒子宽度显示100px；
  2. 调节浏览器宽度不大于901px时，显示“.abc”对应盒子宽度显示200px;
  3. 当调节浏览器宽度大于1201px时，盒子对象宽度显示1200px；
  4. 当小于1200px时候显示宽度为900px。

2、CSS手机移动端自适应代码

.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排错将导致判断失效。

3、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} 
} 
/* 设置了浏览器宽度不小于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">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div> 
</body> 
</html>

注意：device-aspect-ratio

  • device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性。
  • 比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式。
  • 然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：
  • @media only screen and (device-aspect-ratio:4/3)

4、兼容各大浏览器HTML+CSS+JS源代码

<!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} 
} 
@media screen and (max-width: 1200px) { 
.abc {width: 900px} 
} 
@media screen and (max-width: 900px) { 
.abc {width: 200px;} 
} 
@media screen and (max-width: 500px) { 
.abc {width: 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">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div> 
</body> 
</html>

以上就是手机移动端自适应CSS，根据不同屏幕显示不同@media screen响应式的详细内容。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK