Responsive设计——不同设备的分辨率设置

最新推荐文章于 2021-08-17 23:12:28 发布

大志天成119

最新推荐文章于 2021-08-17 23:12:28 发布

阅读量432

点赞数

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：

1.1024px显屏

@media screen and (max-width : 1024px) {                    
/* 样式写在这里 */          
}

2.800px显屏

@media screen and (max-width : 800px) {              
/* 样式写在这里 */          
}

3.640px显屏

@media screen and (max-width : 640px) {              
/* 样式写在这*/            
}

4.iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {              
/* 样式写在这 */            
}

5.iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {         
/* 样式写在这 */            
}

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {              
/* 样式写在这 */            
}

现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：

@media (max-width: 480px) { ... }

@media (max-width: 768px) { ... }

@media (min-width: 768px) and (max-width: 980px) { ... }

@media (min-width: 1200px) { .. }

任务

复杂的示例在这里也无法学习，我们来看一个简单的示例，在宽屏下是3列布局，当屏幕在小于480时是单列显示。看一下右侧CSS编辑器中的代码，思考一下效果实现的原理。

<!doctypewww.dztcsd.com/ html>
<html>
<head>
<meta charset="utf-8">
<title>columns</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="left"></div>
<div class="content"></div>
</div>
</body>
</html>

大志天成119

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Responsive设计——不同设备的分辨率设置

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：1.1024px显屏@media screen and (max-width : 1024px) { /* 样式写在这里
复制链接

扫一扫