Web响应式设计(二)

头像
AshleyLv
    阅读 6 分钟
    2

    前面我们说了媒体布局在响应式设计中的应用，但是同时它也有一定的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS 媒体查询规则突变到另一组，两者之间没有任何平滑渐变。伊桑· 马科特在A List Apart 上发表的有关响应式网页设计的文章（http://www.alistapart.com/art... ）。其实他采用的技术（流动布局、弹性图片和媒体查询）并不新颖，而将这些理念基于一套完整统一的方法论进行应用则很有创造性。对于很多网页设计工作来说，他的文章打开了很多新的思路。事实上，这种网页设计的新方法做到了两全其美：使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。将这两者组合到一起构成了响应式设计的核心，基于此可以创造出真正完美的设计。

    如何将网页从固定布局修改为百分比布局

    在丹·锡德霍姆（Dan Cederholm ）编写的《无懈可击的Web 设计》一书种，提供了一个简易可行的公式，可以将固定像素宽度转换为百分比宽度：

    目标元素宽度÷上下文元素宽度=百分比宽度

    看上去很简单，如何来应用这个公式呢，我们来举个栗子：
    比如书中提到的这段html页面

    <div id="wrapper">  
<!-- the header and navigation -->  
<div id="header">  
<div id="navigation">  
<ul>  
<li><a href="#">navigation1</a></li>  
<li><a href="#">navigation2</a></li>  
</ul>  
</div>  
</div>  
<!-- the sidebar -->  
<div id="sidebar">  
<p>here is the sidebar</p>  
</div>  
<!-- the content -->  
<div id="content">  
<p>here is the content</p>  
</div>  
<!-- the footer -->  
<div id="footer">  
<p>Here is the footer</p>  
</div>

    它基于固定像素的样式是这样的：

    #wrapper {  
margin-right: auto;  
margin-left: auto;  
width: 960px;  
}  
#header {  
margin-right: 10px;  
margin-left: 10px;  
width: 940px;  
}  
#navigation {  
padding-bottom: 25px;  
margin-top: 26px;  
margin-left: -10px;  
padding-right: 10px;  
padding-left: 10px;  
width: 940px;  
}  
#navigation ul li {  
display: inline-block;  
}  
#content {  
margin-top: 58px;  
margin-right: 10px;  
float: right;  
width: 698px;  
}  
#sidebar {  
border-right-color: #e8e8e8;  
border-right-style: solid;  
border-right-width: 2px;  
margin-top: 58px;  
padding-right: 10px;  
margin-right: 10px;  
margin-left: 10px;  
float: left;  
width: 220px;  
}  
#footer {  
float: left;  
margin-top: 20px;  
margin-right: 10px;  
margin-left: 10px;  
clear: both;  
width: 940px;  
}

    下面我们来应用公式得出它的百分比宽度，首选我们讲最外层的元素wrapper的宽度设为96%,然后我们来如何计算header呢 940/960=97.9166666667%就是header的百分比宽度
    下面是刚才那段样式改为百分比样式之后：

    #wrapper {  
margin-right: auto;  
margin-left: auto;  
width: 96%; /* 最外层 DIV */  
}  
#header {  
margin-right: 10px;  
margin-left: 10px;  
width: 97.9166667%; /* 940 ÷ 960 */  
}  
#navigation {  
padding-bottom: 25px;  
margin-top: 26px;  
margin-left: -10px;  
padding-right: 10px;  
padding-left: 10px;  
width: 72.7083333%; /* 698 ÷ 960 */  
} 

    <p class="p1"><span style="font-family: Arial, Helvetica, sans-serif;">#navigation ul li {</span></p><p class="p1">display: inline-block;</p><p class="p1">margin-right: 2.6595745%; /* 25 ÷ 940 */</p><p class="p1">}</p><p class="p1">#navigation ul li a {</p><p class="p1">height: 42px;</p><p class="p1">line-height: 42px;</p><p class="p1">text-decoration: none;</p><p class="p1">text-transform: uppercase;</p><p class="p1">font-family: Arial, "Lucida Grande", Verdana, sans-serif;</p><p class="p1">font-size: 27px;</p><p class="p1">color: black;</p><p class="p1">}</p>  


<p class="p1">#content {</p><p class="p1">margin-top: 58px;</p><p class="p1">margin-right: 10px;</p><p class="p1">float: right;</p><p class="p1">width: 72.7083333%; /* 698 ÷ 960 */</p><p class="p1">}</p><p class="p1">#sidebar {</p><p class="p1">border-right-color: #e8e8e8;</p><p class="p1">border-right-style: solid;</p><p class="p1">border-right-width: 2px;</p><p class="p1">margin-top: 58px;</p><p class="p1">margin-right: 10px;</p><p class="p1">margin-left: 10px;</p><p class="p1">float: left;</p><p class="p1">width: 22.7083333%; /* 218 ÷ 960 */</p><p class="p1">}</p><p class="p1">#footer {</p><p class="p1">float: left;</p><p class="p1">margin-top: 20px;</p><p class="p1">margin-right: 10px;</p><p class="p1">margin-left: 10px;</p><p class="p1">clear: both;</p><p class="p1">width: 97.9166667%; /* 940 ÷ 960 */</p><p class="p1">}</p>

    接下来要做的是用em替换px，<body>标签设置文字大小为100%，给其他文字都使用相对单位em，那这些文字都会受body上的初始声明的影响。这样做的好处就是，
    如果在完成了所有文字排版后，用户又提出将页面文字统一放大一点，我们就可以只修改body 的文字大小，其他所有文字也会相应变大。上面的公式业同样适用与字体，

    给body上加上下面的字体

    font-size: 100%;

    font-size: 16px;

    font-size: 1em;

    如果logo的字体是48px,那么现在就是font-size:3em，48/16=3
    那么什么是em呢

    em 是书面形式的大写字母“ M”的简称，发音和 M相同。以前，“ M”常被用来测定某种字体的大小，因为它是英文字母中最大（最宽）的字母。如今， em作为一个测量单位，

    指的是特定字母的宽度和高度相对于特定字体磅值的比例。

    与em类似的是rem，它们的区别是em是相对与父元素的比例，rem是相对于根元素的比例。

    弹性图片

    在浏览器种实现图片随着流动布局相应缩放非常的简单，只需要加入如下的样式：

    img {  
<span style="white-space:pre">    </span>max-width: 100%;  
}

    这样就可以让图片自动缩放了。

    为不同尺寸的视口提供不同的图片

    <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

    css代码为

    @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } }

    响应式视频

    HTML5中视频插入变得很简洁

    <video src="myVideo.ogg"></video>

    只需要一个video标签就可以搞定。如果需要确定视频的宽度和高度，只需要加上width和height属性

    <video src="video/myVideo.mp4" width="640" height="480">What, do you mean you don't understand html5?</video>

    其余的属性还包括用来控制媒体预加载的preload （Html5 的早期尝鲜者应该注意preload 替代了原先的autobuffer ），用来重复播放视频的loop ，以及用来定义视频

    缩略图的poster （这个属性在视频播放延迟时非常有用）。要使用某个属性，将其追加到标签中即可。下面的例子包含了刚才提到的所有属性：

    <video src="video/myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">What, do you mean you don't understand HTML5?</video>

    这种方法并不能免除我们为一个媒体文件创建多种版本。我们都期望这个问题在将来某个适当的时刻会自行解决，此时我们手握多种格式的媒体文件，则可以这样编写视频标签：

    <video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">

    <source src="video/myVideo.ogv" type="video/ogg">

    <source src="video/myVideo.mp4" type="video/mp4">

    What, do you mean you don't understand HTML5?

    </video>

    然而上面的视频却不能随着页面响应式的缩放，怎么来实现这一点呢

    <video src="myVideo.ogg"></video>
    我们可以再video标签上应用下面的样式：

    video { max-width: 100%; height: auto; }

    这样就可以实现缩放了，但是它却解决不了使用iframe嵌入视频的相应问题，比如
    <iframe width="960" height="720" src="http://www.youtube.com/embed/B1_N28DA3gY"

    frameborder="0" allowfullscreen></iframe>

    我们可以通过一个jquery插件来解决这个问题--fitvids.我们只需要从http://fitvidsjs.com上下载FitVids插件，加入到页面上

    <script>  
$(document).ready(function(){  
// Target your .container, .wrapper, .post, etc.  
$("#content").fitVids();  
});  
</script>

    最后附上响应式设计相关的网站：

    http://mediaqueri.es/ 响应式创意网站
    http://bradfrost.github.io/th... responsive patterns
    https://www.smashingmagazine....

    部分文字摘自「Responsive Web Design with HTML5 & CSS3」

    最后推荐下轮子工厂--一个分享vue,angular优秀组件的网站

    响应式设计响应式布局
    AshleyLv
    839 声望38 粉丝

    他拿着一件斗篷 扮演着一条龙

    « 上一篇
    Web响应式设计(一)
    下一篇 »
    分享一个基于vue的环形菜单组件

    引用和评论

    推荐阅读
    头像
    分享一个功能强大的vue.js拖拽组件

    AshleyLv赞 36阅读 73.5k评论 8

    头像
    vue3知识点：响应式数据的判断

    刘大猫阅读 143

    头像
    vue3知识点：Vue3.0中的响应式原理和 vue2.x的响应式

    刘大猫阅读 125

    0 条评论
    得票最新