响应式布局

最新推荐文章于 2024-07-24 20:11:59 发布

MissGeng

最新推荐文章于 2024-07-24 20:11:59 发布

阅读量424

点赞数 1

分类专栏： Web前端设计文章标签：响应式设计 html

本文链接：https://blog.csdn.net/MissGeng/article/details/68513173

版权

Web前端设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

闲着没事整理一下各博客哥对响应式布局的理解，以及自己对开发的理解，以便开发中使用

h5响应式布局：

响应式设计的步骤:

原文链接：http://caibaojian.com/356.html

1. 设置 Meta 标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

^[1]（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。）

2.通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。

(1)它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

这里的样式就会覆盖上面已经定义好的样式。

(2)设置多种视图宽度

假如我们要兼容ipad和iphone视图，我们可以这样设置：

/**ipad**/

@media only screen and (min-width:768px)and(max-width:1024px){}

/**iphone**/

@media only screen and (width:320px)and (width:768px){}

3.字体设置

到目前为止，开发人员用到的字体单位大部分都是像素，虽然像素在普通网站上是Ok的，但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。

css3引入了新的字体单位叫做rem,和em类似但对于Html元素，rem更方便使用。

rem是相对于根元素的，不要忘记重置根元素字体大小

html{font-size:100%;}

完成后，你可以定义响应式字体：

@media (min-width:640px){body{font-size:1rem;}}

@media (min-width:960px){body{font-size:1.2rem;}}

@media (min-width:1200px){body{font-size:1.5rem;}}

关于rem的理解，参考博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)

4.宽度需要使用百分比

如：

#head { width: 100% }
#content { width: 50%; }

5.处理图片缩放的方法

简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出

#wrap img{

max-width:100%;

height:auto;

}

除了img标签的图片外我们经常会遇到背景图片，比如body为背图：

body{

background-img:url(logo.png);

background-repeat:no-repeat;

background-size:100% 100%;

}

background-size是css3的新属性，用于设置背景图片的大小，有两个可选值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值，那么另一个值默认为auto。 background-size:cover; 等比扩展图片来填满元素 background-size:contain; 等比缩小图片来适应元素的尺寸。

注意background-size对于IE8以下的浏览器来说是不兼容的

用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能： HTML 结构：

<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);
    }
}

响应式布局例子如下：

1）.htm代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web响应式布局</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="xiang.css">
<!--[if lt IE 9]>     
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>
<header>
    <div class="name">往事随风</div>
    <nav>
        <ul>
            <li>亿房首页</li>
            <li>亿房信息</li>
            <li>在线咨询</li>
            <li>亿房论坛</li>
        </ul>
    </nav>
</header>
<div id="container">
    <article>
        <h1>武汉亿房网</h1>
        <figure>
            <figcaption></figcaption>
            <img src="images/3.jpg"/> 
        </figure>
        <section>
            <p>前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>
            <p>html指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML</p>
            <p>css级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力</p>
            <p>javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能</p>
        </section>
    </article>
    <aside>
        <article>
            <h1>最多访问文章</h1>
            <ul>
                <li>·《全民编程》我在微软生活中所接触的 </li>
                <li>·Eclipse安装SVN插件方式简明介绍</li>
                <li>·使用Eclipse调试Java程序的10个技巧 </li>
                <li>·三步学会Java Socket编程 </li>
                <li>·程序员妻子自述: 那些程序员教给我的</li>
                <li>·我希望在20岁时就知道的26条时间管理 </li>
                <li>·详解Java解析XML的四种方法 </li>
                <li>·Java数组声明、创建、初始化 </li>
            </ul>
        </article>
        <article>
            <h1>最新发布照片</h1>
            <ul class="imglist">
                <li><img src="images/2.jpg"></li>
                <li><img src="images/3.jpg"></li>
                <li><img src="images/4.jpg"></li>
                <li><img src="images/3.jpg"></li>
                <li><img src="images/4.jpg"></li>
                <li><img src="images/2.jpg"></li>
                <li><img src="images/3.jpg"></li>
                <li><img src="images/4.jpg"></li>
            </ul>
        </article>
        <article>
            <h1>最多访问文章</h1>
            <ul>
                <li>·《全民编程》我在微软生活中所接触的 </li>
                <li>·Eclipse安装SVN插件方式简明介绍</li>
                <li>·使用Eclipse调试Java程序的10个技巧 </li>
                <li>·三步学会Java Socket编程 </li>
                <li>·程序员妻子自述: 那些程序员教给我的</li>
                <li>·我希望在20岁时就知道的26条时间管理 </li>
                <li>·详解Java解析XML的四种方法 </li>
                <li>·Java数组声明、创建、初始化 </li>
            </ul>
        </article>
        <article>
            <h1>最多访问文章</h1>
            <ul>
                <li>·《全民编程》我在微软生活中所接触的 </li>
                <li>·Eclipse安装SVN插件方式简明介绍</li>
                <li>·使用Eclipse调试Java程序的10个技巧 </li>
                <li>·三步学会Java Socket编程 </li>
                <li>·程序员妻子自述: 那些程序员教给我的</li>
                <li>·我希望在20岁时就知道的26条时间管理 </li>
                <li>·详解Java解析XML的四种方法 </li>
                <li>·Java数组声明、创建、初始化 </li>
            </ul>
        </article>

    </aside>
</div>
<footer><em>关于站长之家</em> <em>联系我们(电话)</em> <em>广告服务</em> <em>友情链接</em> <em>网站地图</em> <em>版权声明</em> <em>人才招聘</em></footer>
</body>
</html>

2）css代码：

body {
    background: #000;
    font: normal 14px/2 '微软雅黑';
    color: #464646;
    padding-top: 28px;
}
* {
    padding: 0;
    margin: 0;
    list-style: none;
    font-style:normal }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
header {
    width: 980px;
    margin: 0 auto;
}
header .name {
    font: bold 36px/48px Arial, Helvetica, sans-serif;
    color: #F90 }
header nav {
    height: 50px;
    background: #663;
    border-radius: 5px;
    text-align: center;
}
header nav, header nav a {
    color: #fff }
header nav ul li {
    display: inline-block;
    *display:inline;
    *zoom:1;
    width: 200px;
    line-height: 50px;
}
#container {
    margin: 12px auto;
    width: 980px;
    overflow: hidden;
    zoom: 1;
}
#container article {
    width: 700px;
    background: #fff;
    border-radius: 5px;
    float: left;
    margin-bottom:10px;
    padding:0 12px;
}
#container article h1 {
    height: 48px;
}
#container article figure {
    text-align:center;
}
#container article figure img {
    max-width: 100%;
    height: auto;
    margin:0 auto
}
#container article section {
    margin: 20px;
    font-size: 12px;
}
#container article section p {
    margin-top: 1em;
    text-indent: 2em }
#container aside {
    width: 240px;
    float: right;
}
#container aside article {
    background: #fff;
    border-radius: 5px;
    font-size: 12px;
    padding: 10px;
    width:220px;
    margin-bottom:12px
}
#container aside article h1 {
    font:bold 14px/28px '微软雅黑';
    border-bottom:1px solid #eee;
    height:28px;
}
#container aside article .imglist {
    font-size:0
}
#container aside article .imglist li {
    display:inline-block;
    display:inline;
    zoom:1;
    width:66px;
    height:50px;
    border:1px solid #eee;
    overflow:hidden;
    margin-right:5px;
    margin-top:5px;
}
#container aside article .imglist li img {
    width:20%;
    height:auto;
    margin:2px;
}
footer {
    background: #669;
    width: 980px;
    margin: 12px auto;
    color: #fff;
    height: 36px;
    text-align: center;
    font: normal 12px/36px '微软雅黑';
    border-radius: 5px;
}
@media screen and (max-width:980px) {
    header {
    width:100%;
    overflow:hidden;
    *zoom:1;
}
header .name {
    font: bold 36px/48px Arial, Helvetica, sans-serif;
    color: #F90;
    text-align:center
}
header nav {
    background: none;
    text-align: center;
    height:auto;
    width:100%;
}
header nav ul li {
    display:inline-block;
    background: #663;
    border-radius: 5px;
    margin:3px 0;
    height:30px;
    line-height:30px;
    width:20%;
}
#container {
    margin: 12px auto;
    width: 100%;
    overflow: hidden;
    zoom: 1;
}
#container article {
    width: 100%;
    background: #fff;
    border-radius: 5px;
    float: none ;
    padding:0;
}
#container article h1 {
    width:95%;
    margin:0 auto }
#container article figure {
    width:95%;
    margin:0 auto
}
#container aside {
    width: 100%;
    ; float: none;
}
#container aside article {
    background: #fff;
    border-radius: 5px;
    font-size: 12px;
    padding: 10px;
    width:100%;
    margin-bottom:6px
}
footer {
    background: #669;
    width: 100%;
    margin: 12px auto;
    height:auto;
    color: #fff;
    text-align: center;
    font: normal 12px/24px '微软雅黑';
    border-radius: 5px;
    padding:12px 0
}
footer em {
    width:95%;
    margin:0 auto;
    display:block;
    border-bottom:1px dotted #789
}
}