2022年2022年浏览器自适应 .pdf

《2022年2022年浏览器自适应 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年浏览器自适应 .pdf（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1.允许网页宽度自动调整首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为 1.0，即网页初始大小占屏幕面积的 100%。所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。2.不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS 代码不能指定像素宽度

2、：width:xxx px;只能指定百分比宽度：width:xx%;或者 width:auto;3.相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em）。body font:normal 100%Helvetica,Arial,sans-serif;上面的代码指定，字体大小是页面默认大小的100%，即 16 像素。h1 font-size:1.5em;然后，h1 的大小是默认大小的1.5 倍，即 24 像素（24/16=1.5）。small font-size:0.875em;small 元素的大小是默认大小的0.875 倍，即 14 像素（14/16=0.875）。4.选

3、择加载CSS 自适应网页设计的核心，就是CSS3 引入的Media Query模块。它的意思就是，自动探测屏幕宽度，然后加载相应的CSS 文件.上面的代码意思是，如果屏幕宽度小于400 像素（max-device-width:400px），就加载tinyScreen.css 文件。名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 4 页 -如果屏幕宽度在400 像素到 600像素之间，则加载smallScreen.css 文件。5.CSS 的media 规则同一个 CSS 文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS 规则。media screen and(max-de

4、vice-width:400px).column float:none;width:auto;#sidebar display:none;上面的代码意思是，如果屏幕宽度小于400 像素，则column 块取消浮动（float:none）、宽度自动调节（width:auto），sidebar 块不显示（display:none）。6.图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。这只要一行CSS 代码：img max-width:100%;这行代码对于大多数嵌入网页的视频也有效，所以可以写成：img,object max-width:100%;老版本的 IE 不支持 max

5、-width，所以只好写成：img width:100%;此外，windows 平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE 的专有命令：img -ms-interpolation-mode:bicubic;或者，Ethan Marcotte 的imgSizer.js。名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 4 页 -addLoadEvent(function()var imgs=document.getElementById(content).getElementsByTagName(img);imgSizer.collate(imgs););不过，有条

6、件的话，最好还是根据不同大小的屏幕，加载不同分辨率的图片。有很多方法可以做到这一条，服务器端和客户端都可以实现。7.图片自适应图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。我们看下面的代码：以下为引用的内容：div img max-width:600px;width:600px;width:expression(document.body.clientWidth600?600px:auto);overflow:hidden;max-width:600px;在 IE7、FF等其他非 IE 浏览器下最大宽度为600px。但在 IE6中无效。width:600px;在所有浏览器中图片的大小为600px;当图片大小大于600px，自动缩小为 600px。在 IE6中有效。名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 4 页 -overflow:hidden;超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 4 页 -