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>
HTML5----响应式(自适应)网页设计相关推荐
- 响应已被截断_技术:RWD响应式网站网页设计基本原则
响应式网站网页设计 RWD响应式网站网页设计对于解决多尺寸屏幕问题是个很好的解决方案,从平面的角度切入需克服很多困难,没有固定的页面尺寸.没有毫米或英寸,没有任何限制会让人感到无从下手.随着建立网站的 ...
- HTML5响应式品牌服装设计类织梦模板
介绍: HTML5响应式品牌服装设计类织梦模板,响应式布局设计,非常时尚大气. 模板整体以多种颜色为主色调,适合做各种类型的网站. 同一个后台管理三网合一简单方便,体验极佳 网盘下载地址: http: ...
- 帝国html5图片站模板,html5响应式自适应帝国CMS整站模板源码瀑布流文章图片资讯文章站...
版本更新 模板已经适配到最新帝国CMS7.5(部分早期源码模板没有适配到最新)!截止2019-持续追踪更新针对机房黑产利用,和帝国CMS一个XS漏洞利用方法的堵截!正式版已补,请已运营的小伙伴找我查看 ...
- html自动适应wap,html5响应式/多彩小清新个人轻博客模板(自适应手机wap)
html5响应式自适应多彩轻博客模板,适合个人博客,美文网,图文网站,设计十分简单.兼容所有主流浏览器.自适应手机wap,多变颜色,会自动根据栏目自动变色. 程序修改和使用极其简单,除一张背景图,根据 ...
- 30个响应式大背景网页设计欣赏
大背景页面设计是抓住访客眼球的最好案例,而这不仅考虑摄影师的设计技巧还考验他们对图片的处理.下面分享30个响应式大背景网页设计案例,希望能给你启发.enjoy! 你可能感兴趣的大背景资讯: <3 ...
- 转自CSDNattilax的专栏 :自适应网页设计 跟 响应式 设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 ...
- 自适应网页设计/响应式Web设计 (Responsive Web Design)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- java响应式网页设计_基于HTML5的响应式网站的设计与实现(论文).docx
毕业论文 基于HTML5的响应式网站的设计与实现 摘 要 随着网络的发展和普及,各类建站技术的更新与运用,现在搭建一个网站的时间和成本越来越低,使得企业官方网站得到了极大的发展.从早期简单的网页展示, ...
- 自适应网页设计(Responsive Web Design)别名(响应式web设计、响应式布局)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- HTML5期末大作业:官网时尚购物(网站设计——美丽说官网时尚购物(1页) HTML+CSS+JavaScript 网页设计成品DW静态网页Html5响应式css3
HTML5期末大作业:官网时尚购物(网站设计--美丽说官网时尚购物(1页) HTML+CSS+JavaScript 网页设计成品DW静态网页Html5响应式css3 常见网页设计作业题材有 个人. 美 ...
最新文章
- tensorflow2版本学习教程1-mnist数据集手写字体
- NPV Formula in Excel
- ajax常见错误和使用总结
- java创建树结构_Java学习之XML-017
- Python -- xlrd,xlwt,xlutils 读写同一个Excel
- mysql5.5java安装_配置非安装版的mysql 5.5
- 如何下载64位版本的eclipse 以及配置
- 企业治理的要诀(学习总结)
- Atitit 爬虫 node版 attilax
- html 判断为空js,JavaScript判断DIV内容是否为空的方法
- 用Python根据经纬度计算距离
- 2020年数学建模亚太赛赛后分享总结
- linux设置display参数,Linux DISPLAY 变量设置
- 一分钟了解英语表达:性能,能力
- 用友U8打开系统管理报错481
- 做好了官网却没客户,要做好seo优化
- 【从零开始的MC服务器】第四步:服务器的权限组GroupManager
- 利用计算机专业优势 帮助大家,计算机专业优势学校
- 苹果AppStore被拒理由大全
- Java实现常用设计模式之观察者模式