Responsive Web Design-基础

在responsive web design 中, 我们经常要用到<meta>这个标签. 这里是一些常用的属性以及是干什么用的.

<meta charset = "UTF-8">

声明网页文字编码的方式

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport告诉浏览器怎样显示网页. 例子中

width 表示网页的宽度和设备的宽度一样.

initial-scale 说的是当网页第一次加载的时候放大几倍. 例子中设置为1, 表示根据width属性设定大小,而且不会zoom-in, 或者zoom-out. 如果是initial-scale=2则表示当第一次加载网页的时候,网页将是两倍于width属性的大小.

user-scalable 控制是不是允许用户zoom-in或者zoom-out, 一般设置为user-scalable=yes. 如果设置为no则用户不能放大或缩小.

Maximum-scale 设置用户最大能放大多少. 如果maximum-scale=1则用户不能放大. 如果maximum-scale为2那么表示用户最多能放大2倍.


HTML5里面多了很多结构化的标签. 比如: <header>,<footer>,<nav>,<section>,<aside>. 注意<header>和<head>是不一样的.

<header role="banner">
***
</header>

<nav role="navigation">
***
</nav>

<footer role="contentinfo">
***
</footer>

<article>
***
</article>

<aside role="complementary">
***
</aside>

这里<aside>标签是用来表示二级内容.其他的标签都可以根据名字来得知他们的意思.这里说明一下role属性, 这个属性是根据WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)来的. 这东西是3W组织发布的, 旨在提升标签的可访问性.

下面用一个最最基本的例子来显示一下这些标签的基本用法.我们不需要添加任何CSS,只用这些标签就可以做到最基本的responsive.

<!DOCTYPE html>
<html>
    <head>
        <title>Pandas Forever</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <!--[if lt IE 9]>
            <script src="files/html5shiv.js"></script>
        <![endif]-->
    </head>
    <body>
        <header role="banner">
            <h1>Pandas Forever</h1>
            <nav role="navigation">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href="/links/">Links</a></li>
                    <li><a href="/contact/">Contact</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <h2>Pandas in Wolong</h2>
            <p>The Wolong National Nature Preserve, in theSichuan Province of China, 
                is home to more than150 giant pandas. It's one of the key sites forpanda breeding 
                research, and 66 cubs have beenborn at Wolong since it was established in 1980.
                Pandas are an endangered species, with between1500 and 3000 living in the wild, 
                and less than300 in captivity (research centers and zoos).</p>
        </article>
        <aside role="complementary">
            <h2>Related Links</h2>
            <ul>
                <li><a href="http://www.flickr.com/groups/pandasunlimited/">Pandas Unlimited</a></li>
                <li><a href="http://nationalzoo.si.edu/animals/webcams/giant-panda.cfm">National Zoo PandaCams</a></li>
                <li><a href="http://worldwildlife.org/species/giant-panda">Panda Facts at WWF</a></li>
            </ul>
        </aside>
        <footer role="contentinfo">
            <p>&copy; 2014 Pandas Forever</p>
        </footer>
    </body>
</html>



你可能感兴趣的:(Responsive Web Design-基础)