关于响应式布局,你必须要知道的
一、前言
响应式Web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。
二、视口
移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异,电脑端的视口宽度等于分辨率,而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。
1.为什么手机端视口要设为980px?
当年乔布斯设想:苹果手机如果在市场上火爆了,但是各个网站还没有来得及制作手机端网页,那么用户不得不用手机访问电脑版的网页,如何用小屏幕访问大屏幕的页面也同样可读呢?乔帮主就想着为手机固定一个视口宽度,让手机的视口宽度等于世界上绝大多数PC网页的版心宽度,就是980px。这样,用手机访问电脑版网页的时候,旁边刚好没有留白。不过页面缩放后文字会变得非常小,用户需要手动放大缩小才能看清楚,体验非常差。
2.约束视口
为了解决前面的问题,可以在网页的中添加下面这行代码:
1 |
<meta name="viewport" content="width=d 4000 evice-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> |
1 2 3 4 5 |
width=device-width 视口为设备宽度(就是人设置的一个宽度)//不设置的话默认为980px initial-scale=1.0 初始化的视口大小是1.0倍 maximum-scale=1.0 最大的倍数是1.0倍 user-scalable=0 不允许缩放视口
|
这个视口的标签告诉浏览器怎么渲染网页。在这里,标签想表达的意思是:按照设备的宽度(device-width)来渲染网页内容。事实上,在支持这个标签的设备上给你看一看效果,你就明白了。
不错呀!用户体验大大改善!!!
此时如果用document.documentElement.clientWidth来测试浏览器屏幕宽度,你会发现当前视口宽度等于手机屏幕的宽度,约数后的视口宽度都是在320~480之间(手机竖直使用的时候)。
这个视口的尺寸,是手机厂商设置的,能够保证我们的文字比如16px,在自己的这个视口下清晰、大小刚刚合适。所以大屏幕的手机的约束视口 > 小屏幕手机的约束视口。这就能够保证我们的网页可以用px写字号、写行高。
需要注意的是:约束之后的视口宽度,不是自己的分辨率!!每个手机的分辨率,都要比自己的视口宽度大得多得多!
最最重要的一句话:前端开发工程师,丝毫不关心手机的分辨率,我们只关心视口。
三、图片
人们常说说“一图胜千言”,确实如此。我们网页中关于松饼的文字介绍再多,也没有图片有吸引力。下面我们就在页面上方添加一张松饼的图片(2000像素宽),效果类似引诱用户往下看的大题图。
哇,真是好大一张图,它让整个网页看起来都失衡了,水平方向上图片溢出了。不行,必须解决这个问题。可以用CSS给图片指定固定宽度,但问题是我们想让它能在不同大小的屏幕中自动缩放。比如,我们例子中的iPhone屏幕宽度为320像素,如果我们把图片设置成320像素宽,那么iPhone屏幕旋转后又怎么办呢?这时候320像素变成了480像素。
解决方案很简单,只要一行CSS代码就可以让图片随容器宽度自动缩放:
1 2 3 4 |
img { max-width: 100%; }
|
回到手机上,刷新页面,结果比较符合预期了。
这里声明max-width规则,就是要保证所有图片最大显示为其自身的100%(即最大只可以显示为自身那么大)。此时,如果包含图片的元素(比如包含图片的body或div)比图片固有宽度小,图片会缩放占满最大可用空间。
为什么不用width:100%?
要实现图片的自动缩放,也可以使用更通用的 width 属性,比如width:100%。然而,这条规则在这里并不适用。因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下,图片会被无谓地拉伸。
- 关于响应式布局,你必须要知道的
- 关于响应式布局,你必须要知道的
- 关于Jmeter3.0,你必须要知道的5点变化
- 关于MFi认证你所必须要知道的事情
- 关于FFMPeg-PHP你必须要知道的
- 恩,关于一个软件工程师必须要知道的排序算法!
- 关于MOSFET 必须要知道的事
- web前端之响应式布局,你必须要知道的
- 关于cocoa框架,你所要知道的一切(苹果官方文档,cocoa框架核心竞争力,必须收藏!)
- 关于Http协议,你必须要知道的
- 关于cocoa框架,你所要知道的一切(苹果官方文档,cocoa框架核心竞争力,必须收藏!)
- 关于MFi认证你所必须要知道的事情
- 关于MFi认证你所必须要知道的事情
- 【转】关于Jmeter3.0,你必须要知道的5点变化
- Java中关于bit操作你必须要知道的事情
- 关于LLVM,这些东西你必须要知道!
- 关于hashCode你必须要知道的三件事
- 关于 Http 协议,你必须要知道的
- 关于MFi认证你所必须要知道的事情
- 关于锁相环(PLL)必须要知道的事