Web网页响应式布局

2019-03-25
Responsive

Web网页响应式布局

2019-03-25

[TOC]

1) 响应式布局介绍

Q：什么是响应式布局？
A：不管您的用户使用何种终端访问您的网站，都能够自动识别适应终端设备的分辨率以及宽度，让您的网站在众多设备中无缝浏览；响应式布局是就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本

响应式布局的优缺点：

优点：面对不同分辨率设备灵活性强，快捷解决多设备显示适应问题，达到多终端视觉和操作体验非常风格统一，节约开发成本和维护成本；
缺点：兼容各种设备工作量大，效率低下；代码累赘会出现隐藏无用的元素，加载时间加长，会出现用户混淆的情况；

Q：响应式布局该怎么设计？
A：在CSS3中加入了Media Queries模块（媒介查询)，是制作响应式布局的一个利器，使用这个工具我们可以非常方便快捷的制造出各种丰富的实用性强的界面；网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。

Media Queries模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式；

Web自适应网页在线查看工具：Responsivator（开源的直接在https://github.com/johnpolacek/Responsivator下载)

2) 响应式布局Media Queries模块

@media 语法结构及用法
功能：通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件，如min和max标识大于等于和小于等于。
如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上
使用方式：在CSS样式中内嵌“@media”，使用外部样式表的引用在@import和link中使用“@media”；

点击阅读完整原文

[TOC]

1) 响应式布局介绍

响应式布局的优缺点：

优点：面对不同分辨率设备灵活性强，快捷解决多设备显示适应问题，达到多终端视觉和操作体验非常风格统一，节约开发成本和维护成本；
缺点：兼容各种设备工作量大，效率低下；代码累赘会出现隐藏无用的元素，加载时间加长，会出现用户混淆的情况；

Media Queries模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式；

Web自适应网页在线查看工具：Responsivator（开源的直接在https://github.com/johnpolacek/Responsivator下载)

2) 响应式布局Media Queries模块

#author:WeiyiGeek
/** 满足screen设备条件则导入color.css **/
@import url(color.css) screen and (min-width: 1000px);  

 /* 或者使用link导入外部css文件 -- 推荐*/
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)  href="link.css" />

 /* 或者css文件直接嵌入*/
@media 设备类型 only (选取条件)  not (选取条件)  and  (设备特性参数)，设备二 { 样式代码 }
@media screen and (max-width:640px)  { css样式代码 }  //在彩色电脑显示器屏幕和最大宽度在640px的时候

 例如：
/* 样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中 */
@media not handheld and (color) { 样式代码 }
@media all and (not color) { 样式代码 } /* 样式代码将被使用在非彩色设备中 */
@media only screen and (color) { 样式代码 }   使用only关键字的作用是让那些不支持Media QueriesType的设备的浏览器将表达式的样式隐藏起来。**/

媒体查询能够获取的值：
1.设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
2.渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
3.设备的手持方向，横向还是竖向orientation(portrait|lanscape)和打印机等。
4.画面比例aspect-ratio点阵打印机等。
5.设备比例device-aspect-ratio-点阵打印机等。
6.对象颜色或颜色列表color，color-index显示屏幕。
7.设备的分辨率resolution

可用的设备类型：
all	        所有设备
braille	盲文，即盲人用点字法触觉回馈设备
embossed	盲文打印机
handheld	手持的便携设备
print	        文档打印用纸或打印预览视图模式
projection	各种投影设备
screen	        彩色电脑显示器屏幕
speech	       语言和音频合成器
tty	               固定字母间距的网格的媒体，比如电传打字机和终端
tv	               电视机类型的设备

可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中， 指定方式类似如下所示：
@media handheld and (min-width:360px), screen and (max-width: 480px) { 样式代码 }
//手持设备与屏幕设备

可用的设备特性参数：（都支持max/min前缀)

常规屏幕值选择：
电脑屏幕（x >=1024), PAD(1024> x >=768 ), 手机（760 > x)PX

案例：媒体查询的简单使用布局响应

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>初认识网站自适应之媒体查询@media</title> 
    <style>
        /**初始CSS样式**/
        body,h1 {margin: 0;padding: 0;color: white}
        section#container {margin: 0 auto; width: 1024px;}
        section#main,aside,header,footer {
            background-color: black;
            margin: 5px 0px;
        }
        h1 {text-align: center;font-size: 1em;}
    
        /** 布局开始 **/
        header {
            float: left;
            width: 100%;
            line-height: 100px;
        }

        #left {
            float: left;
            width: 200px;
            line-height: 400px;
            margin-right:10px;
        }
        #main {
            float: left;
            width: 700px;
            line-height: 400px;
        }

        #right {
            float: left;
            width: 200px;
            line-height: 400px;            
            margin-left:10px ;
        }
        footer {
            float: left;
            width: 100%;
            line-height: 80px;
        }

        /***媒体查询使用案例**/
        /** （1024px) 计算机屏幕显示 |  字体黄色 / 5个栏目 **/
        @media screen and (min-width:1024px) {
            h1 { color: yellow;}
            section#container {width: 1160px; }
            #right{width: 230px;}
        }

        /** (1024px > x > 768px) Pad  | 字体紫色  / 4个 栏目**/
        @media screen and (min-width:768px) and (max-width:1024px)
        {
            h1 {color: #f0f;}
            section#container {width: 1024px; }
            #main {width: 800px}
            #right {display: none;}
        }

        /** (767px > x) 手机  | 字体绿色 5个栏目 **/
        @media screen and (max-width:760px)
        {
            h1 {color:green}
            section#container {width: 640px;}
            #left {width:640px;}
            #main {width: 640px;}
            #right {width: 640px; margin-left:0px ;}
        }

    </style>
</head>
<body>
 <!-- HTML5建议使用语义标签--->
<section id="container">
    <header id="head"><h1>Head</h1></header>
    <aside id="left"><h1>Left</h1></aside>
    <section id="main"><h1>Main</h1></section>
    <aside id="right"><h1>Right</h1></aside>
    <footer id="footer"><h1>Footer</h1></footer>
</section>
</body>
</html>

3) 在移动设备上设置原始大小显示

在移动设备上设置原始大小显示和是否缩放的声，是在页面的头部\<head></head>之间加上下面这样的语句∶

/** 设置默认的宽度为设备的宽度 **/
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
//或者
<meta name="viewport" content="width=600px " />

//参数如下：
width ： viewport的宽度 
height ： viewport的高度 
initial-scale ： 初始的缩放比例 
minimum-scale ： 允许用户缩放到的最小比例 
maximum-scale ： 允许用户缩放到的最大比例 
user-scalable ： 用户是否可以手动缩放

注意事项：
1.如果在页面中已经准备好了在小尺寸的窗口中使用的样式，并且有可能在iPhone或iPod touch中被打开时，请不要忘记了加入标签并在标签中写入指定的窗口宽度。
2.可以通过viewport把自己冒充成更宽的屏幕。

4) 响应式网站的内容设计

在开发响应式布局网站，除了页面布局还有网站中的内容也是比较重要的，比如网站显示的图片和文字。如果是背景图片，我们可以准备多张不同尺寸的图片，然后在各自的媒体查询样式中结合结合一些“min-width，min-height,max-width,max-height等样式属性使用对应的图片背景即可，来限制窗口最小或最大宽度和高度，模拟响应式及流式布局，从而保证其图片不失真，或者是采用JS插件来实现各个图片的缩放大小。

响应式设计秉承：“内容优先，移动优先”的设计原则。
其中最重要是网站中的文字大小，常常采用的单位标准 pixel（像素)，em，rem，百分比等等。

A：我们如何进行选择自适应网站的字体标准？
Q：我们需要根据每个单位标准的特性来判断是否适合自适应网站的开发。

（1)px
描述：piexl（像素)用作web的设计单位，它本身固有的精密度和准确度，字体赋具体的值，就能在所有设备以及浏览器中保持相同的大小。直白的说就是按照像素点大小进行显示无论是PC端，还是手机端大小都是一样。
不适合响应式的原因：虽然这种方法提供了非常精确的大小控制，但它却与我们需要的弹性和响应式相违背的，因为由于CSS层叠样式表，父元素通过继承的特性将会把尺寸传递到子元素中。开发人员如果想单独地分配样式，那就必须手动地设置不同的参数去覆盖已存在的样式。

（2)em
描述：em也是字体单位标准，可以定义font-size的值大小，em在浏览器中是可以变化的，不需要去为每一个元素设置文本大小值；
比如：font-size值为px，那么1em = 16px，2em = 32px；
缺点：尽管使得维护网站的成本降低，但会阻碍开发人员正在寻求控制、精度和可预测性的字体大小；
解决办法：通过为大部分内容使用相同的计算单位，需要添加一些简单的文本元素，如header和footer；

（3)rem
描述：提供弹性字体大小的单位rem（root(根) Em)，与em很相似。
两者的不同：rem只定义“父”元素的尺寸，可以解决很多出现内嵌套的元素问题。

（4)百分比
描述：百分比也是可变化的，类似em单位可被继承的。
理论上两者是没有很大的区别都是计算单位，实际上需要理解两者的区别是自己打算选择使用哪种计算单位在你的设计上。
例如，CSS声明： { font-size:100%; }，这样可以覆盖掉浏览器默认定义或者其他不想要的百分比声明，在这里可以使用em单位的。
缺点：使用百分比来增加字体大小，你将可能去改变应用于body的百分比，而不用做其他操作。维护是一个很大的问题，是值得你在设计中多多考虑到的。

A：前面介绍的4种字体的计算单位，究竟哪一种更加适合响应式Web设计呢？
Q：确定的是em使得字体更加容易缩放和维护。

5) 响应式网站的设计流程

当产品经理提出产品功能移动化的需求时，通常的网站设计流程如下：

第一步：确定需要兼容的设备类型、屏幕尺寸。
第二步：制作线框原型。（即功能的选择，在不同设备下简约显示功能)
第三步：测试线框原型。（发现可访问性、可读性等方面存在的问题)
第四步：视觉设计。（由于移动设备的屏幕像素密度与传统电脑屏幕不同，需要保证内容文字的可读性、控件可点击区域的面积等)
第五步：前端实现。（与前端开发进行沟通，与传统的web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化)

欢迎各位志同道合的朋友一起学习交流，如文章有误请在下方留下您宝贵的经验知识，个人邮箱地址【master#weiyigeek.top】或者个人公众号【WeiyiGeek】联系我。

更多文章来源于【WeiyiGeek Blog - 为了能到远方，脚下的每一步都不能少】, 个人首页地址( https://weiyigeek.top )

专栏书写不易，如果您觉得这个专栏还不错的，请给这篇专栏 【点个赞、投个币、收个藏、关个注、转个发、赞个助】，这将对我的肯定，我将持续整理发布更多优质原创文章！。

最后更新时间：2023-06-06 17:20:28
文章原始路径：_posts/编程世界/前端技术/HTML/Web网页响应式布局.md
转载注明出处，原文地址：https://blog.weiyigeek.top/2019/3-25-357.html
本站文章内容遵循知识共享署名 - 非商业性 - 相同方式共享 4.0 国际协议

WeiyiGeeker