自适应网站设计规范 第1篇
除了布局和文本,_自适应网页设计_还必须实现图片的自动缩放。这只要一行CSS代码:
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的。
addLoadEvent(function() {
var imgs = (_content_).getElementsByTagName(_img_);
(imgs);
});
根据以上的步骤,可以简单的制作出一个自适应网站。
自适应网站设计规范 第2篇
例如使用如下的代码,可以让屏幕宽度低于480像素的设备(如iPhone等),网页侧栏隐藏中部内容栏宽度自动调节。CSS中的百分比中指的是相对于父元素的宽度。子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了。但这只适合布局简单的页面,复杂的页面实现很困难。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
自适应网站设计规范 第3篇
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 {
font-size: ;
然后,h1的大小是默认大小的倍,即24像素(24/16=)。
small {
font-size: ;
small元素的大小是默认大小的倍,即14像素(14/16=)。