自适应网页和响应式网页,html5 自适应
本文介绍了HTML5响应式(自适应)网页设计的实现，分享给大家，如下：
第一步：在网页代码的头部添加一行viewport meta标签。
meta= viewport content= width=device-width，initial-scale=1/viewport是网页的默认宽度和高度。上面一行代码的意思是，网页的默认宽度等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页的初始大小占屏幕面积的100。
所有主流浏览器都支持这个设置，包括IE9。对于那些老浏览器(主要是IE6、7、8)，需要使用css3-mediaqueries.js
！-[if lt IE 9]script src= http://css3-media queries-js . Google code . com/SVN/trunk/css3-media queries . js /script！[Endif]-第二步：(注意)不要使用绝对宽度和字体大小。
宽度：自动；/宽度：XX %；第三步：(注意)字体大小
字体大小是页面默认大小的100%，即16像素。
使用相对大小 REM 代替绝对大小 PX
html { font-size:62.5%；} body {font:normal 100% Arial，无衬线；字体大小：14px字体大小：1.4红色；}第四步：流程布局
‘流动布局’的意思是每个区块的位置是浮动的，而不是固定的。左{宽度：30%；浮动：左}。右{宽度：70%；浮动：对；}它的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的底部，不会在水平方向溢出，避免了水平滚动条的出现。
步骤5:选择加载CSS
“自适应网页设计”的核心是CSS3引入的媒体查询模块。自动检测屏幕宽度，然后加载相应的CSS文件。
link rel= style sheet type= text/CSS media= screenand(max-device-width: 600px) href= style/CSS/CSS 600 . CSS /上面的代码意味着如果屏幕宽度小于600像素(max-device-width:600 px)，它将
如果屏幕宽度介于600像素和980像素之间，请加载css600-980.css文件。
link rel= style sheet type= text/CSS media= screen and(min-width:600 px)and(max-device-width:980 px) href= CSS 600-980 . CSS /and(不推荐):除了加载带有html标签的CSS文件，它还
@导入url(css600.css )屏幕和(max-device-width:600 px)；第六步：@ CSS的媒体规则
@媒体屏幕和(max-device-width: 400px) {。left{ float:无；}}当屏幕小于400时，left取消浮动。
第七步：图像适配。
自适应网页设计还必须实现图片的自动缩放。
img，object { max-width:100%；}旧版IE不支持max-width，所以只好写成：
img {宽度：100%；}在Windows平台上缩放图片时，可能会出现图像失真。这时候可以尝试使用IE的专有命令。
img {宽度：100%；-ms-插值-模式：双三次；}或者使用js - imgSizer.js
addLoadEvent(function(){ var imgs=document . getelementbyid( content )。getElementsByTagName( img )；img sizer . collate(imgs)；});注意：如果条件允许，最好根据屏幕大小的不同，加载不同分辨率的图片。
操作简单：
style type= text/CSS img { max-width:100%；}视频{最大宽度：100%；高度：自动；} header ul Li { float:left；列表样式：无；list-style-type:无；右边距：10px} header select { display:none；} @ media(max-width:960 px){ header ul { display:无；} header select { display:inline-block；} }/style body header ul lia href= # class= active Home/a/Li lia href= # AAA/a/Li lia href= # BBB/a/Li lia href= # CCC/a/Li lia href= # DDD/a/Li/ul select Option class= selected a href= # Home/a/Option Option value=/AAA AAA/Option Option value=/BBB BBB/Option value=/CCC希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。