发表于： 2016-06-19 00:20:12
1 849
今天完成的事情：
1.安装PS
2.了解了px切图的一些技巧
3.学习了自适应网页设计的相关知识
明天计划的事情：
1.若服务器认证成功则配置服务器
2.动手做任务三
遇到的问题：
1.用PS打开了下载的任务psd，感觉有点懵，不知道是否为将里边的图层直接导出来，这样子任务里讲到的切图似乎又没有什么关系了
收获：
自适应网页设计：
- 在网页代码头部加入viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport：网页默认的宽度和高度；
width=device-width：网页宽度默认等于屏幕宽度
initial-scale=1：原始缩放比例为1.0
对于不支持的老式浏览器（主要是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: **% 或者 auto）
- 字体不使用绝对大小（px），只使用相对大小（em）
像素px是相对于显示器屏幕分辨率而言的（浏览器的默认字体高都是16px）；
em是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，是对于HTML根元素的相对大小。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
/*rem的一个例子*/
p {font-size:14px; font-size:.875rem;}
在写CSS的时候，需要注意以下几点：
- body选择器中声明Font-size=62.5%；
- 将原来的px数值除以10，然后换上em作为单位；
- 重新计算那些被放大的字体的em数值，避免字体大小的重复声明
- 使用流动布局
- 引入CSS3的Media Query模块
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件；如果屏幕宽度在400像素到600像素之间，则加 载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载，代码如下：
@import url("tinyScreen.css") screen and (max-device-width: 400px);
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则：
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
- 图片自适应
img { max-width: 100%;}
或者
img, object { max-width: 100%;} //对视频也有效
老版本的IE不支持max-width，可写：
img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
有条件最好还是根据不同大小的屏幕，加载不同分辨率的图片。
返回列表
评论