您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

4种强大的响应式WEB设计技术

作者:UncleToo  来源:原创  日期:2014-03-10 13:07:01
收藏  评论:( 0 )  阅读:658

       随着互联网的发展,越来越多的用户通过移动设备来访问网站,因此,保证网站在任何设备上能友好的展示与访问是非常重要的,在本文中,UncleToo搜集了4种不同种类元素的响应式设计,他能帮助大家设计出非常优秀的响应式网页。


响应式图片

这个听起来很复杂,但是实现起来却很简单,只需要简单的设置下面的CSS代码即可。

img {
     max-width: 100%;
}


响应式HTML5视频

HTML5规范允许我们在你网页上轻松地嵌入视频。同样,让HTML5响应视频也很容易,只需添加以下CSS代码。

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


响应式导航菜单

导航菜单是每个网站必不可少的一部分,它能够让用户方便快捷的找到他们想要的东西。普通的菜单在移动设备上却很难使用,这时我们可以使用<select>代替传统的横向下拉菜单。例如:

<nav>
  <ul>
    <li><a href="/" class="active">home</a></li>
    <li><a href="/collections/all">Books</a></li>
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li>
    <li><a href="/pages/about-us">About Us</a></li>
    <li><a href="/pages/support">Support</a></li>
  </ul>
  <select>
    <option value="" selected="selected">Select</option>
    <option value="/">Home</option>
    <option value="/collections/all">Books</option>
    <option value="/blogs/five-simple-steps-blog">Blog</option>
    <option value="/pages/about-us">About Us</option>
    <option value="/pages/support">Support</option>
  </select>
</nav>

下面是用到的CSS代码,没有什么复杂的东西,默认情况下我们隐藏 <select>,当文档宽度小于960px时才显示。

nav select {
  display: none;
}
@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}


响应式数据表格

表格一般很难实现响应式设计,但是这里有一种方法可以很好的实现。首先我们创建一个基本表格:

<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>

下面是CSS代码:

/*
Generic Styling, for Desktops/Laptops
*/
table {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
  background: #eee;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

到这里,我们已经创建了基本样式的表格,下面这段CSS代码就是实现表格响应式的核心代码:

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}




除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/842.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论