响应式设计(Responsive web design)

2017-05-02  本文已影响0人  leonaxiong

前端算是入了门了,该考虑点响应式设计了。概念已经是老生常谈,下面2张图都是我参与开发的两个小网站,将直观展示什么是响应式设计(Responsive web design)

chrome浏览器的开发者工具,可以进行device调试,选择不同移动终端和分辨率

无bootsrap手机端.PNG
有bootrap手机端.PNG
以上都没有规划响应式设计,区别只在于开发初有考虑地添加了Bootstrap
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

Bootstrap 是CSS3的一套网格系统(Grid System),其原理是把整个页面宽度被划分为12个单元,简单来说,如图二最上方的导航栏在设计初针对的web页面,每个子目录占导航栏的2个单元(6*2=12);当屏幕尺寸发生变化后,导航栏会自动根据划分的单元格换行。

一、媒体查询

 body {
        background-color: grey;
    }
    @media screen and (max-width: 960px) {
        body {
            background-color: red;
        } 
    }
    @media screen and (max-width: 768px) {
        body {
            background-color: orange;
        }
    }
    @media screen and (max-width: 550px) {
        body {
            background-color: yellow;
        } 
    }
    @media screen and (max-width: 320px) {
        body {
            background-color: green;
        }
    }
<meta name="viewport" content="initial-scale=2.0,width=device-width, maximum-scale=3, minimum-scale= 0.5" />
/*initial-scale=2.0将画布大小放大到实际尺寸两倍,maximum-scale和minimum-scale用来控制页面的可缩放范围*/

一般经常使用的是
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

二、流式布局
当不同的视口出现的时候,你可以单独增加媒体检测,但未来会有更多大小不一的视口出现,难道我们要不停地增加检测?这时我们要使用百分比布局。

.oscarMain {
    float: left;
    margin-top: -28px;
    width: 28.9398281%; /* 202 ÷ 698 */
}
.oscarMain {
    float: left;
    margin-top: -28px;
    width: 28.9398281%; /* 698 ÷ 202 */ 
    max-width: 202px;
}
#wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 96%; /* Holding outermost DIV */ 
    max-width: 1414px;
}
@media screen and (min-width: 1001px) and (max-width: 1080px) {
    #navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
    #navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
    #navigation ul li a { font-size: 1.1em; }
}
上一篇 下一篇

猜你喜欢

热点阅读