响应式布局的应用

时间 2019-11-11

标签响应布局应用繁體版

原文原文链接

响应式布局意在实现不一样屏幕分辨率的终端上浏览网页的不一样展现方式。经过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式 Web 设计是一个让用户经过各类尺寸的设备浏览网站得到良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，而后再智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，可是你却没有感受到任何差异，二者的用户体验几乎同样，这说明这个网站在响应式设计方面作得很好。html

　　响应式的优势和缺点：浏览器

　　优势：布局

　　一、面对不一样分辨率设备灵活性强。post

　　二、可以快捷解决多设备显示适应问题。网站

　　缺点：spa

　　一、兼容各类设备工做量大，效率低下。scala

　　二、代码累赘，会出现隐藏无用的元素，加载时间加长。设计

　　响应式的设计有三种方法：code

　　一、使用Meta标签htm

　　二、经过使用媒体查询设置样式@Media

　　三、设置视图的宽度经过百分比

　　响应式的步骤：

　　一、使用Meta标签

　　大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率。你可使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度做为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

　　二、经过使用媒体查询设置样式@Media

　　@media screen and (min-width:640px)and(max-width:960px)

　　这句的意思是在大于640小于960的分辨率下所激活的样式表，这个语句就是响应式布局的基础应用了。在判断终端分辨率大小后，赋予不一样的样式进去，就像下面的例子：

　　@media screen and(max-width:560px){

　　　　body{}

　　}

　　最大是560的分辨率

　　@media screen and (min-width:640px)and(max-width:960px){

　　　　body{}

　　}

　　640到960之间的分辨率

　　三、设置视图的宽度

　　经过百分比控制宽度也能实现响应式,不用像素px这种固定的单位来控制，也可使用em来定义

　　例如：#heade{width:100%}

　　　　　#footer{width:60%;}