码迷,mamicode.com
首页 > Web开发 > 详细

HTML5+CSS3响应式设计(二)

时间:2018-01-18 13:37:43      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:变化   重要   png   css   匹配   --   宽度   ref   span   

上一节传送门《HTML5+CSS3响应式设计(一)》

设置 viewport meta标签后,任何浏览器都不再缩放页面了,这一节我们可以针对不同视口
来修正设计效果。

一、我们用一个ipad(1024*768)来说明这一点

上一节中我们的页面是960px宽度,我们ipad如果是横屏显示1024px,页面显示很正常。

如果是竖屏显示768px,页面会被裁剪。

下面我们在样式表中增加媒体查询样式:

1 @media screen and (max-width: 768px) {
2     #wrapper {
3       width: 768px;
4     }
5     #header,#footer,#navigation {
6         width: 748px;
7     }
8 }    

媒体查询针对视口宽度不大于 768 像素的情况,重新调整了外壳、头部、页脚以及导航
等页面元素的宽度。

技术分享图片

添加上面的媒体查询后,虽然里面并不好看,但是好歹页面没有被裁减,整个页面信息都能看到!

同样可以采用该方法来调整一下局部:

 1 @media screen and (max-width: 768px) {
 2   #wrapper {
 3     width: 768px;
 4   }
 5   #header,#footer,#navigation {
 6     width: 748px;
 7   }
 8   #content,#sidebar {
 9      padding-right: 10px;
10     padding-left: 10px;
11     width: 728px;
12   }
13 }

二、响应式设计中应该让内容始终优先显示

再来看下之前的界面:

技术分享图片

 

为了便于之后的理解,也贴出页面结构的代码:

 1 <body>
 2     <div id="wrapper">
 3         <!-- the header and navigation -->
 4         <div id="header">
 5             <div id="navigation">
 6                 <ul>
 7                     <li><a href="#">navigation1</a></li>
 8                     <li><a href="#">navigation2</a></li>
 9                 </ul>
10             </div>
11         </div>
12         <!-- the sidebar -->
13         <div id="sidebar">
14             <p>here is the sidebar</p>
15         </div>
16         <!-- the content -->
17         <div id="content">
18             <p>here is the content</p>
19         </div>
20         <!-- the footer -->
21         <div id="footer">
22             <p>Here is the footer</p>
23         </div>
24     </div>
25 </body>

css如下:

 1     #wrapper {
 2         margin-right: auto;
 3         margin-left: auto;
 4         width: 960px;
 5     }
 6     
 7     #header {
 8         margin-right: 10px;
 9         margin-left: 10px;
10         width: 940px;
11         background-color: #779307;
12     }
13     
14     #navigation ul li {
15         display: inline-block;
16     }
17     
18     #sidebar {
19         margin-right: 10px;
20         margin-left: 10px;
21         float: left;
22         background-color: #fe9c00;
23         width: 220px;
24     }
25     
26     #content {
27         margin-right: 10px;
28         float: right;
29         margin-left: 10px;
30         width: 700px;
31         background-color: #dedede;
32     }
33     
34     #footer {
35         margin-right: 10px;
36         margin-left: 10px;
37         clear: both;
38         background-color: #663300;
39         width: 940px;
40     }

这里我们的侧边栏在正文之前,试想一下,在移动端显示时,难道我们会先显示侧边栏再显示正文吗?(侧边栏信息的重要性不及内容)

所以在移动端,我们会优先显示正文,将侧边栏放在正文后面显示。

基于此处考虑,我们将侧边栏与正文互换一个位置:

1 <div id="content">
2   <p>here is the content</p>
3 </div>
4 <div id="sidebar">
5   <p>here is the sidebar</p>
6 </div>

互换后,对大屏幕的显示并没有什么影响,因为我们的侧边栏与内容用的是 float:left 和 float:right 属性,但是在 iPad上,则变成了首先显示内容区,下面才是侧边栏。

现在显示顺序已经是比较合理了,我们可以对小屏的内容追加一些样式,让其看起来更加漂亮一点。

三、给小屏添加一些媒体样式

 1         @media screen and (max-width: 768px) {
 2             #wrapper,
 3             #header,
 4             #footer,
 5             #navigation {
 6                 width: 768px;
 7                 margin: 0px;
 8             }
 9             #logo {
10                 text-align: center;
11             }
12             #navigation {
13                 text-align: center;
14                 background-image: none;
15                 border-top-color: #bfbfbf;
16                 border-top-style: double;
17                 border-top-width: 4px;
18                 padding-top: 20px;
19             }
20             #navigation ul li a {
21                 background-color: #dedede;
22                 line-height: 60px;
23                 font-size: 40px;
24             }
25             #content,
26             #sidebar {
27                 margin-top: 20px;
28                 padding-right: 10px;
29                 padding-left: 10px;
30                 width: 728px;
31             }
32             .oscarMain {
33                 margin-right: 30px;
34                 margin-top: 0px;
35                 width: 150px;
36                 height: 394px;
37             }
38             #sidebar {
39                 border-right: none;
40                 border-top: 2px solid #e8e8e8;
41                 padding-top: 20px;
42                 margin-bottom: 20px;
43             }
44             .sideBlock {
45                 width: 46%;
46                 float: left;
47             }
48             .overHyped {
49                 margin-top: 0px;
50                 margin-left: 50px;
51             }
52         }

最终效果如下:

技术分享图片

 

看上去很赞,但不要高兴太早,接下来就是见证无奈的时刻。

技术分享图片

 

媒体查询尽其所能,根据设备特性应用了对应的样式。

但问题是,现有的媒体查询只覆盖了小范围的视口。视口宽度小于 768 像素的设备都将
看到内容被剪切,而视口介于 768 像素到 960 像素之间的设备,则会使用未受媒体查询
样式影响的原有样式,结果我们已经知道了,一旦视口宽度小于 960 像素,页面就无法
匹配

 

如果针对已知的特定访问设备,可以单独使用媒体查询来制作理想的设计效果,我们已
经见过专门适配 iPad 有多简单。但是这种策略有严重的缺陷,换句话说,它不能适应未
来的变化。

 

我们的设计应该在突变之前保持灵动。要做到这点,需要将呆板的固定布局修改成灵活的流式布局

HTML5+CSS3响应式设计(二)

标签:变化   重要   png   css   匹配   --   宽度   ref   span   

原文地址:https://www.cnblogs.com/lewis-messi/p/8309396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!