本篇文章扣丁学堂 html5 培训小编主要是和大家分享一下 HTML5 响应式 (自适应) 网页设计如何实现, 对 HTML5 感兴趣想要学习或者是想要加入到 HTML5 行业的小伙伴们就随小编一起来看一下吧.
扣丁学堂 HTML5P 培训
第一步: 在网页代码的头部, 加入一行 viewport 元标签
viewport 是网页默认的宽度和高度, 上面这行代码的意思是: 网页宽度默认等于屏幕宽度 (width=device-width), 原始缩放比例(initial-scale=1) 为 1.0, 即网页初始大小占屏幕面积的 100%.
所有主流浏览器都支持这个设置, 包括 IE9. 对于那些老式浏览器(主要是 IE6,7,8), 需要使用 CSS3-mediaqueries.JS
第二步:(注意)不使用绝对宽度, 字体大小
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 文件.
href="style/css/css600.css" />
上面的代码意思是, 如果屏幕宽度小于 600 像素(max-device-width: 600px), 就加载 css600.CSS 文件.
如果屏幕宽度在 600 像素到 980 像素之间, 则加载 css600-980.CSS 文件.
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);
- });
注: 如有条件的话, 最好还是根据不同大小的屏幕, 加载不同分辨率的图片
简易式操作:
- 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;
- }
- }
以上就是扣丁学堂 HTML5 在线学习小编给大家分享的 HTML5 响应式 (自适应) 网页设计的实现, 希望对小伙伴们有所帮助, 想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询. 扣丁学堂是专业的 HTML5 培训机构, 不仅有专业的老师和与时俱进的课程体系, 还有大量的 HTML5 在线视频供学员观看学习哦.
来源: http://www.jianshu.com/p/b91842d332f6