欢迎您来到,码代码-李雷博客        登录  |  注册

html移动端wap页面、图片多少宽度最合适?【转载】

更新:2016-02-20 19:40:28
人气:5283
来源:本站整理
A+

目前网站开发已经更多的转向移动端设计、制作,想询问一下移动端网页宽度多少合适?960px、640px、480px、320px?图片多少宽度适合?比如用640px的图片宽度设置为320px是否比较清晰?但是图片大小会较大是否合适?


我用的一个傻办法,rem

首先,只需要要求美术按照6plus的分辨率来设计和出图。

然后页面HTML元素设置font-size:100px,接着页面里任何需要设置尺寸的,都使用rem,因为我设定了font-size为100px,所以尺寸可以很容易的转换,比如10px=.1rem

html{font-size:100px;}

*{font-size:.14rem}

接着,页面启动需要一个js语句,用以获得当前屏幕分辨率跟设计稿分辨率的比例,乘以100,去设置html的font-size,这样页面所有实用rem的元素都将获得对应的尺寸。设计稿如果以640为宽度

var scale = $('body').width() / 640;

$('html').css('font-size', 100 * scale + 'px');

页面启动执行一下就可以了,也可以在onsize事件里添加一份,这样页面发生变化,也会自动适应.


目前手机市场鱼龙混杂,高端如iPhone6 Plus,低端如Android 2.2(不是黑Android,确实如此),那么屏幕的分辨率也各式各样。经过长时间的摸索与实践,尤其各类微信活动开发过程中得到的经验,我在此分享给大家。

<!--移动端版本兼容 -->
<script type="text/javascript">
         var phoneWidth =  parseInt(window.screen.width);
         var phoneScale = phoneWidth/640;
         var ua = navigator.userAgent;
         if (/Android (\d+\.\d+)/.test(ua)){
                   var version = parseFloat(RegExp.$1);
                   if(version>2.3){
                            document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
                   }else{
                            document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
                   }
         } else {
                   document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
         }
    </script>
<!--移动端版本兼容 end -->

页面尺寸定背景640*1039(iPhone6 Plus在微信浏览器中的尺寸),内容区域定在640*832(iPhone4在微信浏览器中的尺寸),相对于背景垂直居中。如果不需要兼容iPhone4的屏幕(不过基本客户都会要求去兼容),那么内容区域最好定义在640*1008(iPhone5及大部分中高端安卓机在微信浏览器中得尺寸),依然相对于背景垂直居中。如果客户对于图片有特别高精度的要求,那么psd中的需要高精度的图片尺寸请使用切片宽高一倍大的图片(甚至更大,也能0.5倍,视情况而定),页面中给img设置width即可。

至于如何去布局背景、放置内容区域、切图,我也无法提供更多帮助了,在实践中摸索、探索方能找到真知。
希望能帮助到需要帮助的人。

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
关注微信
手机访问
 
 
Copyright © 2014-2019 www.mdaima.com All Rights Reserved.
版权所有:码代码-李雷博客 | 专注PHP技术经验教程分享!   ICP备案号:京ICP备10202169号