其他新闻

其他新闻

移动建站教程(宝塔建站教程)

时间:2023-11-29 信途科技其他新闻

自适应视图的意思是,浏览器宽度、高度不同时,就显示条件匹配的视图页面内容,本文给大家讲讲手机移动端自适应视图。

Axure 8 自带自适应功能,可以自适应电脑、平板、手机等不同大小的屏幕。

要完成手机屏幕的适配,需要做两个地方的设置,一个是页面自适应,一个是手机自适应。

页面自适应

那我们先聊页面自适应属性,页面自适应属性可以通过菜单栏“项目-自适应视图”中配置。自适应视图的意思是,浏览器宽度、高度不同时,就显示条件匹配的视图页面内容,如电脑有些屏幕宽度为1920px、1280px等,手机屏幕宽度为375px。

在不同的屏幕宽度上,浏览器默认宽度则不同,或者你在电脑屏幕上疯狂拖拽浏览器窗口大小,浏览器则会根据宽度切换到该条件的视图进行显示。

当然,如果你只做了一种视图,那么不管你如何疯狂拖拽,网页内容是不会变化的,你会看见的是多出了纵向滚动条或者横向滚动条,仅此而已。

简单针对自适应视图设置中的几个属性进行解释:

预设:系统预设尺寸大小,可以快速填充后面几项设置数据。

名称:就是给视图取个名字。

条件:触发该自适应视图的条件,浏览器窗口≥某宽度或≤某宽度。

宽:设置触发自适应视图宽度,如浏览器窗口小于1280px时,显示该视图的页面内容,手机我设置的宽度为500px,因为目前有些大屏手机,其实逻辑像素已经接近500px了,所以保险起见,设置小于500px则显示手机视图。

高:一般不设置此项,留空,原理与宽度一个意思。

继承自:页面中的默认元素继承自哪个视图,继承的元素可删除,然后会在原来的视图依然存在。

特别解释一下“最大显示分辨率”,意思是超过最大的显示分辨率的屏幕,一律按照此视图内容显示网页内容。

自适应视图设置好后,就可以在不同大小页面去设计网页内容了。

生成HTML时,需要在菜单”发布-生成原型文件”的“自适应视图”中勾选自适应视图。

手机自适应

聊完页面自适应,再来聊聊手机自适应。

手机自适应在菜单”发布-生成原型文件”的“手机/移动设备”中进行设置,这里设置的是在手机网页中如何完美显示的问题。

如果你不设置,那么可能你手机网页显示了网页内容,然后两边宽度留白很多,或者显示不完网页内容,因为你在自适应视图中设计的宽度可能是375px,可能是414px宽度。但是手机的屏幕尺寸种类非常多,设计尺寸并不能完全适应所有手机屏幕。

那么为了不管哪种宽度,在手机网页上都需要满屏铺满网页才更美观,这里的设置就是干这事儿的。

简单针对手机自适应设置中的几个属性进行解释:

包含视图接口标记:勾选后,才会启用手机网页自适应屏幕大小。

宽度:【重要设置】此处宽度填写在手机的自适应视图中,设计图的基准尺寸,我使用的375px(iPhone 6s)基准进行设计的,所以这里我填写的是375的宽度。

高度:这里留空,无需填写。

初始比例:这里留空,无需填写,我试了试,这里不填写默认比例为1。

最小比例:【重要设置】这项作用是当用户使用比设计图更小的手机浏览网页时,可以等比缩放到手机屏幕宽度,这里设置的是最小值,我设置的0.5,足够使用了。

最大比例:【重要设置】原理与最小比例相同,使用比设计图更大的手机屏幕浏览网页时,自动等比放大到手机屏幕宽度,这里我设置的3,目前主流手机的最大屏幕宽度逻辑像素为480,设置3倍已足够使用。

用户可调节:填写no即可。

防止垂直页面滚动(受阻弹性滚动):这项我试了几次,没明白有什么影响,可选可不选,大家也可以自己试试,如果知道什么意思,可以留言说一下。

自动检测和链接电话号码(iOS):在iOS中,可以自动检测出电话号码,点击后,可以拨打电话,可选可不选,根据自己情况来吧。

主屏幕图标:主要是把网页设置到主屏幕时,显示的图标。

iOS屏幕启动画面:网页放到桌面,打开后的启动画面,不多解释,不懂的,要拖出去打。

隐藏浏览器导航(当从iOS主屏幕启动时):iOS打开放到桌面的网页,不会显示浏览器的导航栏和工具栏,比较适合预览APP应用的效果,勾上就行。

iOS状态栏样式:default(白底黑字儿),black(黑底白字儿),black(半透明的黑底白字儿)

没有具体的操作步骤,不过我想你看懂了这两处设置的每项参数含义,那么你已经学会了如何去做自适应网页和手机屏幕自适应了。

福利:给大家一个Axure网站模板,已经配置好页面自适应与手机自适应,大家可以免费下载研究。

好了,聊完了,再见!

作者:世界是棵树,微信公众号:世界是棵树

本文由 @世界是棵树 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

扫描二维码推送至手机访问。

版权声明:本文由信途科技转载于网络,如有侵权联系站长删除。

转载请注明出处https://www.xintukeji.cn/xintu/10806.html

相关文章

苏州园区找关键词排名(苏州快速提高关键词排名)

作者 | 睿和智库研究部编辑 | 刘阳 视觉 | 张爱责编 | 韩玮烨自蛇口工业区成立开始,产业园区历经培育期、成长期,行至2022年,产业园区迎来新发展机遇。公募REITs的发行助推园区进入成熟精细...

苏南网站建设,苏南航运网以什么为中心

苏南航运网以什么为中心这个苏南航运网以船舶运输为中心。它是中国江苏省南部地区的一个综合性航运服务平台,为船舶运输提供全方位的服务。苏南航运网提供货物运输、船舶租赁、货运代理、船舶修理、船舶供应、船舶保...

邯郸关键词排名更新(邯郸关键词优化)

2019年6月1日——2019年6月30日邯郸政务新媒体排行榜由邯郸市网信办、邯郸日报社中原天工指数研究院联合推出邯郸关键词排名更新,通过对邯郸市30多个市直单位和20个县(市、区)(含冀南新区、经济...

「黑龙江关键词优化排名seo」黑龙江产品

本文目录一览: 1、seo如何优化关键词排名? 2、关键词搜索引擎排名seo营销优化怎么做? 3、SEO网站名称怎么写? 4、SEO优化怎么才能快速提升网站关键词排名 seo如何优化关键...

包含焦作seo的词条

信途科技今天给各位分享焦作seo的知识,其中也会对进行解释,如果能碰巧解决你现在面临的问题,别忘了关注和分享本站。本文导读目录: 1、怎么推广网站啊,有谁可以有针对性的介绍一个推广方法,比较实在能快速...

互联网背景下企业网络营销论文,互联网背景下餐饮行业网络营销策略研究

帮助企业在“互联网+”时代背景下稳定持久的发展 关键词“互联网+”营销发展现状对策 一引言 作为新兴的营销手段,网络营销是合理有效利用互联网技术的前提下在。企业网络营销论文 网络营销是企业利用网络环境...

现在,非常期待与您的又一次邂逅

我们努力让每一次邂逅总能超越期待

  • 效果付费
    效果付费

    先出效果再付费

  • 极速交付
    极速交付

    响应速度快,有效节省客户时间

  • 1对1服务
    1对1服务

    专属客服对接咨询

  • 持续更新
    持续更新

    不断升级维护,更好服务用户