手机网站屏幕适配规则总结_济南网站建设

是济南网站建设公司第一品牌,是一家专为中小企业网站建设与网站制作提供动力的济南网络公司
手机网站屏幕适配规则总结
    济南网站建设和济南网站制作Time: 2017-08-15济南网络公司来源:济南网站建设马一席
  目前主流屏幕适配的,是以iPhone 4的640x960px或者iPhone 6 plus的1242x2208px为基准设计,其他设备均采取屏幕适配策略。我们先假定设计稿是按640x960px的规范输出,先来看看前端的常用屏幕适配方案。

手机网站屏幕适配规则总结
 
  根据meta按比例缩放
 
  这种屏幕适配方案的实现更偏技术,大致原理是根据设备的分辨率及像素比等信息,计算出页面的缩放(scale)数值,来进行等比缩放。最终的效果就是基于640x960px的设计稿再进行等比缩放,这种实现比较适合某些图片较多的活动页面开发,可以使用设计稿上的绝对像素值进行开发,即设计稿上是200px则CSS代码中的数值也是200px。
 
  根据页面宽度百分比适应
 
  而屏幕适配开发时,由于iPhone以及许多Android机都具有高分辨率屏幕,比如iPhone 4S的Retina屏幕实际像素点是物理像素的两倍。所以,我们开发时要在640x960px的设计稿尺寸的基础上除以2,比如设计稿上的高度是200px,则CSS中就是height:100px;
 
  基于媒体查询的响应式方案
 
  目前屏幕适配普遍的观点是,响应式设计更适合专题页面,或者没有资源来针对各个终端进行单独开发的团队来使用。
 
  响应式设计主要遵循MobileFirst,要针对不同设备给出不同设计方案,并设置合适的断点,结合百分比方案,来在不同的设备显示不同的布局。
 
  代码方式屏幕适配 获取屏幕的宽高 然后根据自己的设计图 给控件设置宽高
 
  优点:能够适配不同屏幕。  缺点:代码较多,适合某些特殊需求。
 
  布局方式  比如layout-land(横屏时候走这个里面的布局) layout-port(竖屏时候走这里的布局)value-1080-width(名字好像是类似这样忘记了,这里面可以定义一些按钮的大小,这样屏幕宽度是1080时候就走这里面的参数) hdpi  xhdpi  xxhdpi 等放不同分辨率的图片
 
  优点: 简单 不用修改代码  缺点:资源文件比较大
 
  屏幕适配一般都是采用1、 2混合的方式来适配。 
 
  关于屏幕适配布局适配
 
  1、不要使用绝对布局
 
  2、尽量使用match_parent 而不是fill_parent 。
 
  3、能够使用权重的地方尽量使用权重(android:layout_weight)
 
  4、如果是纯色背景,尽量使用android的shape 自定义。
 
  5、如果需要在特定分辨率下适配,可以在res目录上新建layout-HxW.xml的文件夹。比如要适配1080*1800的屏幕(魅族MX3采用此分辨率)则新建layout-1800x1080.xml的文件夹,然后在下面定义布局。Android系统会优先查找分辨率相同的布局,如果不存在则换使用默认的layout下的布局。
 
  上面的文章是由济南网站建设济南网站设计联合为您呈现的。如果您想找关于济南网站建设公司济南网络公司的相关资料,或者您有这篇关于说一下关于手机网站屏幕适配规则总结的文章有什么看法,都可以联系我们马经理15339960349。

当前文章来自济南网站建设:手机网站屏幕适配规则总结

关键词:屏幕适配  

15339960349