CSS&HTML面经专题——（四）移动端响应式布局

CSS&HTML面经专题——移动端响应式布局

1、Viewport视口

在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。

在viewport中有两种视口，分别表示为：

• visual viewport（视觉视口）：浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页，从而改变视觉视口。视觉视口不会影响布局视口的宽度和高度。 固定大小——跟屏幕大小相同，在上面。
• layout viewport（布局视口）：布局视口定义了pc网页在移动端的默认布局行为。因为通常pc的分辨率较大，所以布局视口的默认大小为980像素，可==通过document.documentElement.clientWidth获取==。

也就是说，在不设置网页viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。

现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。

2、媒体查询 @media

可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。（很多网站都是移动端一套样式/PC端一套样式）

.container{ padding-left:15px; padding-right:15px; margin-left:auto; margin-right:auto;}

@media all and ( min-width : 768px ){
    .container{ max-width : 720px; }
}

@media all and ( min-width : 992px ){
    .container{ max-width : 960px; }
}

@media all and ( min-width : 1200px ){
    .container{ max-width : 1140px; }
}

复制代码

媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套代码会很繁琐

• 注意：响应式代码写到要适配的CSS后面。

3、rem/ vh和vw / 流式布局

（2）rem布局——等比缩放布局（网易新闻）

​em : 是一个相对单位，1em等于当前元素或父元素的font-size值。

​rem : 是一个相对单位，1rem等于根元素的font-size值。

• 于是想要自适应各种屏幕就需要动态设置font-size:
  • 通过JS重置font-size（以iPhone6为基准）
  • 这时候1rem在iPhone6下就是100px，在iPhone 6 plus下就是110.4px
  • 但在实际开发中，这样会导致默认font-size很大，相当于是html的font-size为100px了，这个时候就要重置一下body的font-size:16px
  • <script> /* layout viewport : document.documentElement.clientWidth iphone 6 : 375px iphone 6 plus : 414px iphone 6 : document.documentElement.clientWidth / 3.75 -> 100 iphone 6 plus : document.documentElement.clientWidth / 3.75 -> 110.4 */ var fontsize = document.documentElement.clientWidth / 3.75; document.documentElement.style.fontSize = fontsize + 'px'; </script> 复制代码

  介绍一个小插件：vscode的 px to rem 快捷键：ALT+Z

（3）vh/vw

• vw：相对于视窗的宽度，视窗宽度是100vw
• vh：相对于视窗的高度，视窗高度是100vh

如果在iphone 6 下想 =100px , 我应该设置多少个vw呢？

375px/100 = 3.75px 也就是1vw = 3.75px

所以100px 为 100/3.75 = 26.666667 vw

html{ font-size:26.666667vw;}
body{ font-size:16px }
复制代码

（4）流式布局——百分比布局

• 高度定死，宽度自适应，常用flex 对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长

4、响应式布局和自适应布局的区别

自适应布局

（1）出现的背景

在PC时代初期，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少。后来显示器大屏小屏种类越来越多，还有笔记本、平板电脑，这种固定宽度的页面出现了问题。于是出现了一种新的布局方式，宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局。后来网页从PC延伸到了手机，以及 HTML5 标准的发布。自适应布局也从PC延伸到手机，成为网页设计时候的需求.

（2）概念

就是宽度自适用布局，在不同大小的设备上，随着屏幕宽度缩放，网页以等比例的形式缩放宽度(包括内容))，不管屏幕宽度为多少，网页主体排版布局总是一样的。它需要开发多套界面来适应不同的终端。

响应式布局

（1）出现的背景

自适应虽然成为网页设计的必要需求，但还是暴露出一个问题，如果屏幕太小，即使网页内容能够根据屏幕大小进行适配，但是在小屏幕上查看，会感觉内容过于拥挤，降低了用户体验。为了解决这个问题而衍生出来的概念就是响应式布局。它可以自动识别屏幕宽度、并做出相应调整。网页的排版布局和展示的内容会有所变动。

（2）概念

根据屏幕大小变化，页面的内容排版布局会自动调整变动，已呈现更好的用户体验。

5、rem,em,px的区别是什么？

px

绝对单位，页面按精确像素展示。

em

相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem

相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。