码迷,mamicode.com
首页 > 其他好文 > 详细

流式布局和viewport

时间:2019-11-11 09:18:06      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:默认   手机   最大   data-   article   宽度   scale   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

标签:默认   手机   最大   data-   article   宽度   scale   viewport   一个   

原文地址:https://www.cnblogs.com/jlfw/p/11832756.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!