SEARCH

夸米动态

夸米详细讲解响应式网页设计之-iphoneX

2018-01-04 01:42:29

      响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

在iPhone X上的网页呈现
 
横屏
 
       在横屏模式下,iPhone X呈现的是带有白色一个合适的背景条纹的网页。尽管很多部分都有不同的颜色背景,苹果自己的官网也是由这些白色的线条呈现。能让你的页面更有特色的唯一方法是给你的手机网页设置颜色——一个确保大多数情况下与你的品牌/网站的颜色方案一致的颜色。
 
竖屏
 
       当手机在竖屏时(这也是人们最常用的方式),当视窗贯穿所有的边缘时,两边都没有白色线条。在竖屏模式下,iPhone X会在其周围渗透至整个屏幕。它是浸入式的,这样,视窗可以无缝地贯穿四边的圆角。此外,状态和URL /导航条会占用网页的自定义背景颜色。
 
        我们知道,我们通过媒体查询(Media Query)的方式改变网页的布局,我们在哪些宽度下改变布局,也就是我们所称作的断点,我们更习惯的思维是针对某些设备(比如桌面、平板电脑、手机)的 数据来设置断点,比如 1024 对应桌面、768对应pad、480 对应手机,但实际上,这些东西是靠不住的,因为这些屏幕尺寸会根据时代的发展不断的变化,我们的响应不应该只针对某些设备,我们需要的是一个区间值,而不 是将某一分辨率对应一种设备。断点肯定是需要有的,那这些断点是如何设置的呢?怎么才能不是为了断点而断点呢?实际上,这些断点的设置都是根据内容的需要 做的,当我们的内容在达到一个临界点后,视觉效果不符合人们的审美或影响了内容获取时,这就是我们需要的断点。但是我们可能无法在视觉设计的阶段就能覆盖 其尺寸区间内容所有状况,这样我们就需要把它和现有的设备相结合确立断点。
 

   

丨夸米科技

咨询直线:186-2370-8562  官方网站:www.quamae.com

 

*请认真填写需求信息,我们会在24小时内与您取得联系。

LOGO

地址

重庆市渝北区金开大道西段106号创新科技园区3座4楼

郑州市中原区电厂西路西三环交叉口大学科技园东区15E

联系

18623708562
[email protected]
重庆夸米网络科技有限公司 版权所有 备案号:渝ICP备16002041号-2 站点已申请专利保护 盗版必究 法律支持:河南律师服务中心
多一份参考,总有益处
联系夸米,免费获得《策划方案》及报价
高端网站建设 | 响应式网站 | 企业官网 | 营销网站 | UI设计 | 小程序开发 | APP开发 | 品牌设计 | 网络营销推广
业务热线:18623708562
QQ咨询
稍后再说