最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

html5响应式布局基础框架搭建入门

HTML5 王检 浏览 评论

html5响应式布局现今是非常流行的,但是很多人连html5响应式布局的框架都不会搭建,也不知道从何下手,所以本套教程将简单带大家进入响应式布局的大门,先来了解html5响应式布局的历史吧!

html5.jpg


响应式布局来源

响应式布局是在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端设备,而不是为每个终端做一个特定的版本。这个概念是为移动互联网而诞生的,其目的就是为用户提供更加舒适的界面以及更好的体验。


响应式布局的优缺点

优点:

    面对不同分辨率设备灵活性强

    能够快速解决多设备显示适应问题

缺点:

    兼容各种设备效率低下,并且工作量较大

    代码累赘,会出现隐藏无用的元素,浏览器加载时间变长


HTML5响应式布局入门

响应式布局无非就是当设备屏幕分辨率大于多少的时候,定义一套CSS样式;当设备屏幕分辨率小于多少的时候,定义另外一套CSS样式,下面的案例是:当屏幕分辨率大于640px的时候,网页背景显示黄色,当小于640px的时候,网页背景显示红色。

代码如下:

假如有一个外部CSS文件,文件名为style.css,内部css代码如下:

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: red; //背景色为红色
}

添加一个index.html文件,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="style.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)"/>
    <style>
        @media screen and (min-width:640px){
            body{
                background-color: yellow; //背景色为黄色
            }
            .....其它css
        }
    </style>
</head>
<body>
</body>
</html>


代码分析:

外部CSS文件引入的时候添加了一个media="only screen and (max-width:640px)属性内容,表示的是这个style.css里面的样式起作用的最大设备分辨率为640px,如果小于640px,则网页背景色会变成红色。如果超过了640px,这个css文件里面定义的样式将不会起作用,也就是网页的背景色不会变成红色。

index.html里面的@media screen and (min-width:640px)表示的是起作用的最小设备宽度为640px,如果小于640px,网页背景色就不会变成黄色。只有设备屏幕大于640px的时候,里面的css样式才会起作用,也就是网页背景色变成了黄色。

提示:

自己根据上方的代码做一个html5响应式布局小案例吧!只有尝试了才会体会到响应式布局的快感!

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/html5/965.html

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论