响应式网页设计

最近学了响应式网页设计那么什么是响应式网页设计呢?
百度百科上说:响应式Web设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。
我觉得 说白了就是使你的网页不管是在手机还是电脑上,不管浏览器有多大,你的网页都能完美无缺的显示出来。而传统的页面在大的屏幕上会有大量空白,在小的屏幕上,比如手机上会出现网页只显示一部分,或者显示全了但是网页太小看不清。
说完了她的优点再来说说她的缺点,她的缺点呢就是对老版浏览器的支持不太好,而且会产生大量的重复代码。
那么响应式网页设计是如何实现的呢?
1.需要使用媒体查询就是media
2.网页的布局方式用流体布局不要用绝对布局
3.数据使用百分比而不是像素(如width 70%而不是width 300px)
接下来上代码看看响应式网页设计到底是怎么写的
1.页面的布局


<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
        <link rel="stylesheet" type="text/css" href="css/media.css" />
    head>
    <body>
        <header id="header">
            这是头部
        header>
        <div id="main">
            <section id="left">
                左边
            section>
            <section id="right">
                右边
            section>
        div>
        <footer id="footer">
            底部
        footer>
    body>
html>

2.页面的样式,在这里当屏幕的大小不同时显示不同的样式


body{
    font-size:2em;
}
/*
当屏幕大于等于1000时
*/
@media (min-width: 1000px) {
#header {
    width: 100%;
    height: 200px;
    background-color: #00FFFF;
    text-align: center;
}
#main {
    width: 100%;
    height: 200px;
}
#footer {
    width: 100%;
    background-color:#00FFFF;
    text-align: center;
    height: 200px;
}
#left {
    width: 40%;
    float: left;
    background-color: #462727;
    color: white;
    height: 200px;
}
#right {
    width: 60%;
    float: left;
    background-color: #F61818;
    height: 200px;
}
}
/*
当屏幕在800到1000px之间时
*/
@media only screen and (min-width: 800px) and (max-width: 1000px) {
    #header {
    width: 100%;
    margin: 0px;
    background-color: #Cdf444;
    text-align: center;
    height: 200px;
}
#main {
    width: 100%;
    height: 200px;
}
#footer {
    width: 100%;
    background-color: #C78080;
    text-align: center;
    height: 200px;
    float: left;
}
#left {
    width: 100%;
    float: left;
    background-color: #462727;
    color: white;
    height: 200px;
}
#right {
    width: 100%;
    float: left;
    background-color: #F61818;
    height: 200px;
}
}
/*
当屏幕在360到800px之间时
*/
 @media  (min-width: 362px) and (max-width: 800px) {
    #header {
    width: 100%;
    margin: 0px;
    background-color: #C78080;
    text-align: center;
    height: 200px;
}
#main {
    width: 100%;
    height: 200px;
}
#footer {
    width: 100%;
    background-color: #C78080;
    text-align: center;
    height: 200px;
    float: left;
}
#left {
    width: 20%;
    float: left;
    background-color: #462727;
    color: white;
    height: 200px;
}
#right {
    width: 80%;
    float: left;
    background-color: #F61818;
    height: 200px;
}
 }
当屏幕小于等于361px时
 */
@media (max-width: 361px){
#header {
    width: 100%;
    margin: 0px;
    background-color: #C78080;
    text-align: center;
    height: 200px;
}
#main {
    width: 100%;
    height: 200px;
}
#footer {
    width: 100%;
    background-color: #C78080;
    text-align: center;
    height: 200px;
    float: left;
}
#left {
    width: 100%;
    float: left;
    background-color: #462727;
    color: white;
    height: 200px;
}
#right {
    width: 100%;
    float: left;
    background-color: #F61818;
    height: 200px;
}
}

你可能感兴趣的:(响应式web设计)