HTML5响应式(自适应)网页设计的实现


Posted in HTML / CSS onNovember 17, 2017

本文介绍了HTML5响应式(自适应)网页设计的实现,分享给大家,具体如下:

第一步:在网页代码的头部,加入一行viewport元标签

<meta name="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-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>  
<![endif]-->

第二步:(注意)不使用绝对宽度,字体大小

width:auto; / width:XX%;

第三步:(注意)字体大小

字体大小是页面默认大小的100%,即16像素

字体不要使用绝对大小"PX",要使用相对大小“REM”

html{font-size:62.5%;}
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

第四步:流动布局

"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的

.left{ width:30%; float:left}  
.right{ width:70%; float:right;}

其好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现

第五步:选择加载CSS

"自适应网页设计"的核心,就是CSS3引入的Media Query模块。自动探测屏幕宽度,然后加载相应的CSS文件

<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文件

<link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)"  
href="css600-980.css" />

另有(不建议使用):除了用html标签加载CSS文件,还可以在现有CSS文件中加载

@import url("css600.css") screen and (max-device-width: 600px);

第六步:CSS的@media规则

@media screen and (max-device-width: 400px) {  .left{ float:none;} }

当屏幕小于400时,left取消了浮动

第七步:图片的自适应

"自适应网页设计"还必须实现图片的自动缩放。

img, object {max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:

img {width: 100%;}

windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令

img { width:100%; -ms-interpolation-mode: bicubic;}

或使用js--imgSizer.js

addLoadEvent(function() {  

var imgs = document.getElementById("content").getElementsByTagName("img");  


imgSizer.collate(imgs);  

});

注:如有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片

简易式操作:

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 #HTML / CSS
html5实现移动端适配完美写法
Nov 16 #HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 #HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 #HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 #HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 #HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 #HTML / CSS
You might like
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
javascript 数组的方法集合
2008/06/05 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
javascript弹出页面回传值的方法
2015/01/28 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python scatter函数用法实例详解
2020/02/11 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
自我评价优秀范文分享
2013/11/30 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
读书演讲主持词
2014/03/18 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年公务员工作总结
2014/11/18 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
开票员岗位职责
2015/02/12 职场文书
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python