您的位置：首页 > 其它

自适应界面学习文档（@media）

2015-09-28 10:30 344 查看

一直很羡慕那么可以自适应的web界面框架，总觉得很高大上，故而在百度搜了一下，跟着最简单的demo学习了一下，发现，结果还算满意。

下面是学习步骤

第一步：在html界面的title加入

<meta name="viewport" content="width=device-width, initial-scale=1.0">

，此段代码表示meta可提供有关页面的元信息，如针对搜索引擎和更新频度的描述和关键词等。这是我们实现自适应的第一步

第二步：

@media screen and (max-width: 980px) {}

表示当界面宽度最大为980px时使用什么样式，也可以有多个and，表示多个条件，但要注意，由于语言都是自上而下执行，如果你定义了小于等于180后又定义小于等于980，则只会看到980的样式

第三步：

默认样式，即不是在这些条件中的样式，这个根据个人需求而定，而且，尽量不要使用px，可以使用百分比，字体使用em（1em=16px），表示相对大小，图片也使用百分比

这是我弄的一个简单的demo，只是看效果的，没有任何意义，但可以参考一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应学习</title>
<style type="text/css">

body{
font: 1em/150% Arial, Helvetica, sans-serif;
}
#mydiv1{
width:98%;
height:90%;
margin:0px auto;
background:#000000;
}

@media screen and (max-width: 980px) {
#mydiv1{
width:98%;
height:90%;
margin:0px auto;
background:#00FF00;
}
}

@media screen and (max-width: 480px) {
#mydiv1{
width:98%;
height:90%;
margin:0px auto;
background:#FF0000;
}
}

</style>
</head>

<body>
<div id="mydiv1">
465
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航