js页面自适应屏幕大小_用 Axure 免费建个网站 (下):手机移动端自适应视图...

news/2024/5/9 20:37:43/文章来源:https://blog.csdn.net/weixin_39838362/article/details/110799988

2d6b8b03d5cf27bb18706242b3f533d9.png

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

要完成手机屏幕的适配,需要做两个地方的设置,

一个是页面自适应,一个是手机自适应。

页面自适应

那我们先聊页面自适应属性,页面自适应属性可以通过菜单栏"项目-自适应视图"中配置,

自适应视图的意思是,浏览器宽度、高度不同时,就显示条件匹配的视图页面内容,如电脑有些屏幕宽度为1920px、1280px等,手机屏幕宽度为375px,

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

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

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

ca0849e4eb7fbb3c86ef0551327b047b.png

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

名称:就是给视图取个名字。条件:触发该自适应视图的条件,浏览器窗口≥某宽度或≤某宽度。

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

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

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

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

810c43ecddabed0611d761a07f70fe6c.png

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

9ac185d951f6e9c11348b9966441fbdb.png

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

7077c9dcc0bfc31a95f07120e6a3dc40.png

手机自适应

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

手机自适应在菜单”发布-生成原型文件”的“手机/移动设备”中进行设置,这里设置的是在手机网页中如何完美显示的问题,如果你不设置,那么可能你手机网页显示了网页内容,然后两边宽度留白很多,或者显示不完网页内容,

因为你在自适应视图中设计的宽度可能是375px,可能是414px宽度,但是手机的屏幕尺寸种类非常多,设计尺寸并不能完全适应所有手机屏幕,

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

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

c7edcef7153536af99cecb4129e9b604.png

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

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

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

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

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

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

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

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

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

主屏幕图标:主要是把网页设置到主屏幕时,显示的图标。iOS屏幕启动画面:网页放到桌面,打开后的启动画面,不多解释,不懂的,要拖出去打。

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

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

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

用 Axure 免费建个网站-产品导航网​pmdaohang.com
4b3715dc13d64d617857a1708fa1dd3e.png

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

下载地址:

[原创] 导航网站 Axure 原型模板​pmdaohang.com
4b3715dc13d64d617857a1708fa1dd3e.png

2570d929af484405d6b9b36c65d17e84.png

好了,聊完了,拜

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_765843.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web网站服务(二)

Web网站服务(二)一 客户机地址限制1)Allow,deny 先允许后拒绝,默认拒绝所有末明确允许的客户机地址2)deny,allow 先拒绝后允许,默认允许所有末明确拒绝客的户机地址地址形式可以是IP…

大型网站架构演化历程

2019独角兽企业重金招聘Python工程师标准>>> 大型网站的挑战主要来自庞大的用户,高并发的访问和海量数据,任何简单的业务一旦需要处理数以P计的数据和面对数以亿计的用户,问题就会变得棘手。大型网站架构主要就是解决这类问题。更…

服务器系统版本更新,win10系统如何更新到1909版本_网站服务器运行维护,win10系统,更新,1909版本...

vi中哪条命令是不保存强制退出_网站服务器运行维护vi中“q!”命令是不保存强制退出。vi中的一些常用命令:“:w”保存、“:wq!”保存并强制退出、“:x”保存并退出(仅当文件有变化时保存)。注意问题:1、保证电源接通状态,笔记本要外接电源&…

windows 11家庭中文版 使用ie9及以下版本浏览器访问网站

说明: 最近维护一个网站,浏览器需要使用ie9及以下版本,找了很多方法,后来使用的还是ie11,只做了兼容性视图配置,就好了,挑了其中稍简便的方法,以供参考我使用的电脑操作系统版本 ![在…

网站性能测试基本指标

一.系统吞度量要素: 一个系统的吞度量(承压能力)与request对CPU的消耗、外部接口、IO等等紧密关联。 单个reqeust 对CPU消耗越高,外部系统接口、IO影响速度越慢,系统吞吐能力越低,反之越高。 系…

网站漏洞扫描工具Uniscan

2019独角兽企业重金招聘Python工程师标准>>> 网站漏洞扫描工具Uniscan 网站漏洞的种类有很多种,如何快速扫描寻找漏洞,是渗透测试人员面临的一个棘手问题。Uniscan是Kali Linux预先安装的一个网站漏洞扫描工具。该工具可以针对单一、批量、do…

h357.php,基于js的电商网站的搭建

课题研究的背景意义目前是一个互联网的时代,人们的需求日渐的被互联网满足,在这个大的背景下,我们想到了来搭建一个全面的电商的网站来满足的人们的日常的需求。这个前景还是很ok的。可行性研究技术可行性我们的目前学学了html,cs…

kentico7中设置网站的主页

打开SiteManager,选择Settings,然后左上角选择具体的网站,Content,Web Site Content,Default alias path

快速使用Let's Encrypt开启个人网站的https

背景 为什么要使用https? https可以有效避免无良运营商的DNS劫持,可以显著提升网站逼格。使用https已经是大势所趋,人心所向,iOS甚至强制要求开发者使用https。为什么要使用Lets Encrypt? 对于个人开发者而言,https证书太贵&…

搭建网站必不可少的知识8

如何选择主机操作系统?一、请根据网站使用的编程语言来选择合适的操作系统和主机类型:1、网站开发语言为ASP、.NET、HTML,请选择Windows系统虚拟主机免费版及其以上型号主机; 2、网站开发语言为PHP、HTML、WAP,请选择L…

可以免费下载视频素材和模板网站汇总

1.视崛:拥有比较丰富的AE模板和高清视频素材 传送门:http://www.shij001.com/ 2.92素材网:超清视频模板,可以用于商业用途 传送门:http://699pic.com/video/?sem1&sem_kid103309 3.新GG儿:数字视觉分享…

phpstudy2018搭建网站,访问目录出现Forbidden You don't have permission to access / on this server...

关于phpstudy2018搭建网站,访问目录出现Forbidden You dont have permission to access / on this server.: 我都配置好httpd.conf文件了 一开始还以为phpstudy2018出bug了呢,然后才发现还需要在phpstudy设置点东西 1. 首先httpd.conf配置文件…

大快网站:如何选择正确的hadoop版本

2019独角兽企业重金招聘Python工程师标准>>> 大快网站:如何选择正确的hadoop版本 Hadoop的环境安装部署是所有刚开始学习hadoop必然要面对的一个问题,对于新手而言基本不会一次性部署成功,甚至可能要花费好几天的时间才能完成hado…

访问网站的全过程解析(www.sangfor.com.cn)

以访问www.sangfor.com.cn为例,介绍网站访问的全过程 一般服务器都放到总部私网内,外网用户只能访问到公网地址。而且深信服官网服务器有两条线路,一条是电信的202.96.137.88另一条是网通的60.21.140.230 网站访问容易出现跨运营商访问&…

浅析:外链在SEO中的作用!

长期以来,外链在SEO工作都是一个不可逾越的话题,它在整站优化中,扮演重要的角色,特别是熊掌号上线,很多SEO人员,逐渐在唱衰外链的作用。而在实际工作,我们发现来自垂直行业具有一定权威度的外链…

SEO公司清法网络 分析seo优化排名下降的几大原因

企业网站在做SEO优化的过程中,总会遇到被“拔毛”的情况。而网站被“拔毛”后,权重降低,排名下降,让很多站长一筹莫展。搜索公关专家清法通过多年的SEO网站优化经验以及对网站排名问题的深入分析,总结出几个可能导致网…

使用Quasar设计Material和IOS风格的响应式网站

GITHUB:使用Quasar设计旅游网站文章链接:使用Quasar设计Material和IOS风格的响应式网站 Quasar Quasar是一款基于Vue.js开发的UI框架,可以让你轻松构建网站简洁明快的界面,更重要的是它还能让你轻松做好RWD(响应式网站…

html 各大网站分享代码

通过这个网站可以制作 http://share.baidu.com/code <script>window._bd_share_config{"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"",…

分享五个前端开发必备工具网站

1.Beautiful CSS box-shadow examples 包含各种各样的阴影效果&#xff0c;点击自动复制到剪贴板上&#xff0c;再也不用费力气调整阴影效果啦&#xff01; 91 Beautiful CSS box-shadow examples - CSS Scan 2.阿里巴巴矢量图标库 很全很好用&#xff0c;iconfont 懂得都懂…

您与此网站的连接不是私密连接

检查传递参数和header 我是忘记了传递Blade-Auth &#xff0c;会出现此问题