网页自动适应屏幕
来源:互联网 发布:archive.ubuntu.com 编辑:程序博客网 时间:2024/04/30 18:46
一、<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
其中:
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放;
二、所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是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]-->
为了让低于 IE9 版本 IE 浏览器 支持<header>, <article>, <footer>, <figure>等 html5 标签加上一下代码:
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
三、不使用绝对宽度:由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。
四、<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
五、CSS的@media规则
同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。
六、图片的自适应(fluid image)
除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
这只要一行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的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。
- 网页自动适应屏幕
- 网页自动适应不懂分辨率屏幕问题
- 手机网页宽度自动适应屏幕宽度的方…
- 网页自动适应屏幕宽度的CSS代码
- PB自动适应屏幕
- 自动适应屏幕宽度
- 屏幕自动适应
- 网页自动适应浏览器
- 网页自动适应手机
- Delphi自动适应屏幕大小
- Iframe 自动适应屏幕高度
- 设置背景图片自动适应屏幕
- echarts自动适应屏幕大小
- IFRAME自动适应网页宽度
- 网页的高度自动适应
- 网页自动适应手机端
- HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
- HTML5+CSS3的响应式网页设计:自动适应屏幕宽度
- 在GCC里对宽字符赋值的L表示符怎么不被认
- 初学者学习C++的50条忠告
- chrome下form和a标签弹出新window,而不是打开一个新的tab
- 10.归并排序——2路归并排序
- gcc_attribute 机制
- 网页自动适应屏幕
- VC 修改main函数名;让程序后台运行(无窗口)
- [LeetCode]Binary Tree Zigzag Level Order Traversal
- 关于结构体内存对齐
- linux下vi命令大全
- 剖析C语言中a=a+++++a的无聊问题
- ffmpeg 从内存中读取数据
- web项目的maven搭建步骤
- oracle数据类型和对应的java类型