资讯专栏INFORMATION COLUMN

流式布局和viewport

draveness / 1124人阅读

摘要:流式布局百分比布局,非固定宽度,内容向两边填充,流动的布局。适配方案因为默认会进行缩放,所以网页在移动端显示的对用户不友好,所以我们需要进行一些配置来使网页在移动端显示得和端一样。

流式布局

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

viewport(视口)

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

适配方案

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

网页宽度必须和浏览器宽度保持一致

默认显示的缩放比例和pc端保持一致(缩放比例为1.0)

不允许用户缩放网页


 
viewport主要有6个功能属性

width (特殊值: device-width,表示设备屏幕宽度)         设置宽度

height          设置高度

initial-scale(1:表示不进行缩放)     设置默认的初始化缩放比例

user-scalable     设置用户是否可以进行缩放

minmium-scale     设置最小缩放比例

maxmium-scale     设置最大缩放比例

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/58370.html

相关文章

  • 流式布局viewport

    摘要:流式布局百分比布局,非固定宽度,内容向两边填充,流动的布局。适配方案因为默认会进行缩放,所以网页在移动端显示的对用户不友好,所以我们需要进行一些配置来使网页在移动端显示得和端一样。 流式布局 百分比布局,非固定宽度,内容向两边填充,流动的布局。 viewport(视口) PC端的网页在手机端的浏览器显示是不会出现网页的,这是因为移动端的网页不是直接放在移动端的浏览器中,而是放在移动端的...

    jay_tian 评论0 收藏0
  • 微信小程序新单位rpx与自适应布局

    摘要:布局上面四个方法,各有优缺点,现在回头看看微信的,相信大家已经有所启发,实际上就是系统级的把页面按比例分割份,,或者伸缩布局的。也就是说,微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了,或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信...

    LeviDing 评论0 收藏0
  • 微信小程序新单位rpx与自适应布局

    摘要:布局上面四个方法,各有优缺点,现在回头看看微信的,相信大家已经有所启发,实际上就是系统级的把页面按比例分割份,,或者伸缩布局的。也就是说,微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了,或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信...

    helloworldcoding 评论0 收藏0
  • 微信小程序新单位rpx与自适应布局

    摘要:布局上面四个方法,各有优缺点,现在回头看看微信的,相信大家已经有所启发,实际上就是系统级的把页面按比例分割份,,或者伸缩布局的。也就是说,微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了,或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信...

    thursday 评论0 收藏0
  • 微信小程序新单位rpx与自适应布局

    摘要:布局上面四个方法,各有优缺点,现在回头看看微信的,相信大家已经有所启发,实际上就是系统级的把页面按比例分割份,,或者伸缩布局的。也就是说,微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了,或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位,按官方的定义,rpx可以根据屏幕宽度进行自适应,在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信...

    Java_oldboy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<