响应式布局与自适应布局

女爷i 2022-11-26 15:54 364阅读 0赞

自适应布局

为不同的设备提供不同的网页，比如专门写一个mobile / iPhone / iPad版本。虽然解决了适配，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个入口，会大大增加架构设计的复杂度。自适应还暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤

响应式布局（自适应布局的优化）

在自适应布局基础上做了系列优化，解决了屏幕小内容拥挤的问题，响应式网页的概念是一套适应代码为不同的设备提供不同的网页，换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。就算维护也只是针对那一套代码

关于自适应布局和响应式布局的区别

  • ①.自适应布局是多个网页对应对各个设备，响应式布局是一套网页对应多个设备
  • ②.自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局全部适应
  • ③.自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计

关于适配的写法

自适应布局和响应式布局两者都是通过检测视口分辨率来展示对应设计的网页，所以标签内必须加上

  1. <meta name="viewport" content="width=device-width,initial-scale:1.0"/>

响应式布局案例

用响应式写一个针对不同设备的字体大小变化：

  1. /*针对pc端*/
  2. @media screen and (min-width:920px) { 
  3.     body{ 
  4.         font-size: 12px;
  5.     }
  6. }
  7. /*针对pad*/
  8. @media screen and (min-width: 767px) and (max-width:919px) { 
  9.     body{ 
  10.         font-size: 24px;
  11.     }
  12. }
  13. /*phone*/
  14. @media only screen and (max-width: 766px) { 
  15.     body{ 
  16.         font-size: 36px;
  17.     }
  18. }

自适应布局案例

因为自适应布局是写多套针对不同设备的代码，所以适配的案例无法展示，就跟大家讲一哈自适应的布局，页面的自适应布局分为高度自适应和宽度自适应，来看看宽度自适应的布局，宽度自适应有三种方法，分别是用绝对定位；利用margin，中间模块先渲染；自身浮动。

  1. <body>        
  2.         <div class="left">200px</div>
  3.         <div class="main">自适应</div>
  4.         <div class="right">200px</div>
  5. </body>
  7. html,body { 
  8.     margin: 0;
  9.     height: 100%;
  10.     padding: 0;
  11.     font-size: 30px;
  12.     font-weight: 500;
  13.     text-align: center;
  14. }
  15. .main { 
  16.     margin: 0 200px;
  17.     height: 100%;
  18.     background-color: pink;
  19. }
  20. .left,.right { 
  21.     width: 200px;
  22.     height: 100%;
  23.     background-color: greenyellow;
  24. }
  25. .left { 
  26.     float: left;
  27. }
  28. .right { 
  29.     float: right;
  30. }

响应式布局的一些技术点纪录：

  • (1)允许网页的宽度自动的调整
  • (2)尽量少使用绝对的宽度，多点百分比
  • (3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置
  • (4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现

  • (5)选择加载css

这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

如果屏幕宽度大于1300像素，则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。
如果屏幕宽度在400像素以下，则6张图片分成三行。

1.允许网页宽度自动调整

1、首先，meta标签中，加入一行

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

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

  1. <!--[if lt IE 9]>
  2.  　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  3.  　　<![endif]-->

4、流动布局（fluid grid）

“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。

  1. .main { 
  2. 　　　　float: right;
  3. 　　　　width: 70%;
  4. 　　}
  6. 　　.leftBar { 
  7. 　　　　float: left;
  8. 　　　　width: 25%;
  9. 　　}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

5、选择加载CSS

“自适应网页设计”的核心，就是CSS3引入的Media Jquery模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

  1. <link rel="stylesheet" type="text/css"
  2.  　　　　media="screen and (max-device-width: 400px)"
  3.  　　　　href="tinyScreen.css" />

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

  1. link rel="stylesheet" type="text/css"
  2.  　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
  3.  　　　　href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

  1. @import  url("tinyScreen.css") screen and (max-device-width: 400px);

CSS的@media规则

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则

  1. @media  screen and (max-device-width: 400px) { 
  3. 　　　　.column { 
  4. 　　　　　　float: none;
  5. 　　　　　　width:auto;
  6. 　　　　}
  8. 　　　　#sidebar { 
  9. 　　　　　　display:none;
  10. 　　　　}
  12. 　　}

上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。

7、图片的自适应（fluid image）

处理图片缩放的方法

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

  1. img {  width: auto; max-width: 100%; }

除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。

这只要一行CSS代码：

  1. img {  max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

  1. img, object {  max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

  1. img {  width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

  1. img {  -ms-interpolation-mode: bicubic; }

设计原则？适合什么样的项目？

向下兼容，移动优先。

对于非常复杂的网页布局，不适合进行网页自适应的布局，原因之一是实现成本太高，其次就是复杂页面（例如容商网首页，中国企业集群首页等）也不适合移动端的浏览。

其他的响应式布局的框架？

Prue框架是Yahoo的一款轻量级的框架，兼容IE7以上，性能好，但是中文文档少，不利于团队开发，没有组件。
Foundation by ZURB，次于Bootstrap，重量级，362K大小

Bootstrap优势？

学习成本低
是目前最流行的自适应框架
性能非常好，最基础的文件大小只有149.1k
bootstrap.min.js 35.1k
bootstrap.min.css 114k
中文文档完善，还有全套的视频教程
有许多组件可以选择，如Bootstrap switch，Sco.js，Flat UI等，便于快速开发

ps

  1. <!-- width=device-width ：表示宽度是设备屏幕的宽度
  2.     initial-scale=1.0：表示初始的缩放比例
  3.     minimum-scale=0.5：表示最小的缩放比例
  4.     maximum-scale=2.0：表示最大的缩放比例
  5.     user-scalable=yes：表示用户是否可以调整缩放比例 -->

ps.设置多种视图宽度

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

  1. /** iPad **/
  2. @media only screen and (min-width: 768px) and (max-width: 1024px) { }
  3. /** iPhone **/
  4. @media only screen and (min-width: 320px) and (max-width: 767px) { }

ps:@media screen 和 @media screen only的区别:

only用来定某种特别的媒体类型。
对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。
对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

发表评论

表情：
评论列表 （有 0 条评论，364人围观）

还没有评论，来说两句吧...

相关阅读

    相关 自适应布局和响应式布局

    我根据个人理解描述一下： 一套程序在多种终端设备展示，页面布局有2种：自适应布局和响应式布局。这二者有啥区别呢？ 自适应布局，就是页面在多种终端设备，不同分辨率下，能够正常

    柔情只为你懂柔情只为你懂/ 0 赞/ 326 阅读

    相关 响应式布局与自适应布局

    自适应布局 为不同的设备提供不同的网页，比如专门写一个mobile / iPhone / iPad版本。虽然解决了适配，但是比较麻烦，同时要维护好几个版本，而且如果一个网

    女爷i女爷i/ 0 赞/ 365 阅读