流式布局和viewport

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了流式布局和viewport相关的知识,希望对你有一定的参考价值。

流式布局

百分比布局,非固定宽度,内容向两边填充,流动的布局。

viewport(视口)

PC端的网页在手机端的浏览器显示是不会出现网页的,这是因为移动端的网页不是直接放在移动端的浏览器中,而是放在移动端的一个虚拟区域中,这个虚拟区域叫做viewport(视觉窗口,视口,视口的宽度一般默认比浏览器宽度大),然后视口进行相应的缩放,最后将视口放在浏览器中。

适配方案

因为viewport默认会进行缩放,所以网页在移动端显示的对用户不友好,所以我们需要进行一些配置来使网页在移动端显示得和pc端一样。

  • 网页宽度必须和浏览器宽度保持一致
  • 默认显示的缩放比例和pc端保持一致(缩放比例为1.0)
  • 不允许用户缩放网页
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 
</head>

viewport主要有6个功能属性

  • width (特殊值: device-width,表示设备屏幕宽度)?????????设置宽度
  • height ?????????设置高度
  • initial-scale(1:表示不进行缩放) ????设置默认的初始化缩放比例
  • user-scalable ?? ?设置用户是否可以进行缩放
  • minmium-scale ??? 设置最小缩放比例
  • maxmium-scale ??? 设置最大缩放比例

以上是关于流式布局和viewport的主要内容,如果未能解决你的问题,请参考以下文章

2019.4.26 响应式布局

移动web开发之流式布局

移动开发web第一天

自适应网页设计?

Java AWT 图形界面编程LayoutManager 布局管理器 ② ( FlowLayout 流式布局 )

Java AWT 图形界面编程LayoutManager 布局管理器 ② ( FlowLayout 流式布局 )