一、面临问题:网页在电脑上完全显示,但在手机上显示不完全(需要左右拉动才看得到其他部分)
例如:下面这个简易的网页,为加入自动适应之前,电脑和手机打开都是下图效果,电脑上显示看上去效果不错,但手机上需要左右拉动才可以看到网页其他部分,那如何解决这个问题呢?
二、解决问题
1.目标:在手机上也得完全显示就行
2.实际操作部分(重点):
①将网页调整权交给网页
- <head>标签中加入一行viewport(网页默认的宽度和高度)元标签
<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-width:网页宽度默认等于屏幕宽度
initial-scale=1;1代表网页初始大小占屏幕面积的100%
- 注意:老式浏览器(例如:IE6、7、8),需要使用css3-mediaqueries.js,如下
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
②禁止使用绝对宽度
不可:以下这种代码不可使用
width:10px; <!-- 这种代码不可行 -->
可行:以下两种代码均可
width: 20%;
width:auto;
③静止对字体使用固定大小
不可:以下这种代码不可使用
font-size: 12px
可行:以下代码均可行
font-size:1.2em
补充:浏览器的默认字体高都是16px,所以未经调整的浏览器在显示1em=16px。于是我们就可以通过这个等量关系进行计算了!若已经写好的网页字体的px直接除以16就是em了。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
④得是流动布局
- 就是使用float
#father .panel_text{
background-color: #F5F5F2;
float: left;
margin-left: -88%;
margin-top: 15%;
width:295%;
height:200%;
}
⑤选择css,就像if判断
利用css3中的Media Query模块
提示:下面if、if else只是方便解释写的,直接将代码框的代码放在<meat>标签里
if(如果屏幕宽度小于400像素){
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="css/tinyScreen.css" />
}else if(如果400像素<屏幕宽度<600像素){
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)" href="css/tinyScreen.css" />
}
⑦还有图片啦!
写这个简易页面时就踩了一个坑,图片没有设置。。。
css代码用下%号结束就行!
#father .panel_text img{
width:100%;
height:100%;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
第⑤步(补充类,另外一种方法)css3中@media的使用(根据屏幕,在一个css文件中判断使用哪段css代码)
先看看定义:
- 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
- @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
以下代码意思:如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
最后来个总结吧:印象最深的就是自适应的思维和物理学很近有木有!由于物体可以选取其他不同的东西做参考,所以物理书:“运动是绝对的,静止是相对的”那迁移到这个代码上也是一样啦!网页对应不同的屏幕标准得自动适应,那代码就得采用相对的,而不是绝对的!