HTML5响应式(自适应)网页设计的实现
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文介绍了HTML5响应式(自适应)网页设计的实现,分享给大家,具体如下:
第一步:在网页代码的头部,加入一行viewport元标签
viewport是网页默认的宽度和高度,上面这行代码的意思是:网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js
1 2 3 | <!--[ if lt IE 9]> <script src= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script> <![endif]--> |
第二步:(注意)不使用绝对宽度,字体大小
第三步:(注意)字体大小
字体大小是页面默认大小的100%,即16像素
字体不要使用绝对大小"PX",要使用相对大小“REM”
第四步:流动布局
"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的
其好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现
第五步:选择加载CSS
"自适应网页设计"的核心,就是CSS3引入的Media Query模块。自动探测屏幕宽度,然后加载相应的CSS文件
1 2 | < link rel = "stylesheet" type = "text/css" media = "screen and (max-device-width: 600px)" href = "style/css/css600.css" /> |
上面的代码意思是,如果屏幕宽度小于600像素(max-device-width: 600px),就加载css600.css文件。
如果屏幕宽度在600像素到980像素之间,则加载css600-980.css文件
1 2 | < link rel = "stylesheet" type = "text/css" media = "screen and (min-width: 600px) and (max-device-width: 980px)" href = "css600-980.css" /> |
另有(不建议使用):除了用html标签加载CSS文件,还可以在现有CSS文件中加载
第六步:CSS的@media规则
当屏幕小于400时,left取消了浮动
第七步:图片的自适应
"自适应网页设计"还必须实现图片的自动缩放。
老版本的IE不支持max-width,所以只好写成:
windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令
或使用js--imgSizer.js
1 2 3 4 | addLoadEvent( function () { var imgs = document.getElementById( "content" ).getElementsByTagName( "img" ); imgSizer.collate(imgs); }); |
注:如有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片
简易式操作:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | < style type = "text/css" > img{ max-width:100%;} video{ max-width:100%; height:auto;} header ul li{ float:left; list-style:none; list-style-type:none; margin-right:10px;} header select{display:none;} @media (max-width:960px){ header ul{ display:none;} header select{ display:inline-block;} } </ style > < body > < header > < ul > < li >< a href = "#" class = "active" >Home</ a ></ li > < li >< a href = "#" >AAA</ a ></ li > < li >< a href = "#" >BBB</ a ></ li > < li >< a href = "#" >CCC</ a ></ li > < li >< a href = "#" >DDD</ a ></ li > </ ul > < select > < option class = "selected" >< a href = "#" >Home</ a ></ option > < option value = "/AAA" >AAA</ option > < option value = "/BBB" >BBB</ option > < option value = "/CCC" >CCC</ option > < option value = "/DDD" >DDD</ option > </ select > </ header > </ body > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 最近看一些技术网站发现了details 标签的妙用,这个不用js即可实现展开/收缩信息,很方便用来让用户先才答案,然后下面点击再给出答案的效果,这里就为大家简单介绍一下,2024-11-03
- 本文介绍了HTML中的details标签,包括其在实例中的应用,浏览器的支持情况,定义与用法,此标签在HTML5中新增,用于描述文档或文档部分的细节,默认情况下,详情是隐藏的,用2024-11-03
- HTML5标准的推广极大改进了网页表单设计,引入新的表单控件和属性,提升用户体验,简化前端开发,本文详细介绍HTML5新增表单元素,展示如何利用这些元素增强表单功能,如数据验证2024-10-22
- 本文介绍如何在HTML5页面中使用高德地图API实现地图定位功能,首先需要在HTML中引入高德地图API,然后创建一个地图容器,还可以通过点击地图来手动更新位置,这一过程不仅适用2024-10-21
- 在HTML5中,元素定位是通过设置position属性实现的,相对定位基于元素自身位置调整,绝对定位以最近的已定位父元素为参考,固定定位则相对于浏览器窗口固定位置,z-index属性可2024-10-21
- 本文详细介绍了如何使用HTML5和JavaScript构建调用本地摄像头拍照并上传照片的网页应用,内容涵盖从实现摄像头功能,提供了一套完整的操作指南和技术路线,使读者能够在实际项2024-10-21
- 本文详细介绍了Checkbox的基础属性、样式自定义及其应用场景,Checkbox通过<input>元素实现,样式自定义可以通过隐藏原始Checkbox、使用伪元素、JavaScript来实现,Chec2024-10-16
- 本文介绍了HTML5中表单的自动验证、取消验证、自定义错误信息等功能,通过required、pattern、min、max和step属性,可以实现对表单输入的自动检查,novalidate和formnovalida2024-09-23
- 在HTML5项目中使用NotoSansCJK字体能提升用户体验,本文介绍了通过GoogleFonts在线加载和本地托管两种方法,在线加载无需下载,通过GoogleFonts链接快速引入,适合离线使用或2024-09-23
- HLS是一种基于HTTP协议的流媒体传输协议,它的出现使得视频的传输更加稳定和可靠,本文给大家介绍Html5如何播放hls格式的视频,感兴趣的朋友一起看看吧2024-08-19
最新评论