响应式网页设计

最新推荐文章于 2024-03-29 10:29:36 发布

杰仔要努力

最新推荐文章于 2024-03-29 10:29:36 发布

阅读量608

点赞数 2

文章标签：响应式web设计

本文链接：https://blog.csdn.net/qq_27399/article/details/50384236

版权

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

<!DOCTYPE html>
<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;
}
}

杰仔要努力

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
响应式网页设计

最近学了响应式网页设计那么什么是响应式网页设计呢？百度百科上说：响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。我觉得说白了就是使你的网页不管是在手机还是电脑上，不管浏览器有多大，你的网页都能完美无缺的显示出来。而传统的页面在大的屏幕上会有大量空
复制链接

扫一扫