回复内容:
我用的一个傻办法,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事件里添加一份,这样页面发生变化,也会自动适应. 不谢邀,这种看需求和设计的事拿出来问有意义么?
才疏学浅,看不懂 @王崇悟写的东西有啥实际意义。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
我在公司做了一年移动端开发了,设计给过来的视觉稿比较常见的有两个,640跟750。建议你可以看看淘宝的flexible解决方案。
详见:
移动端高清、多屏适配方案
补充:
移动端适配方案浅析 制作了很长时间的wap站点,这个问题还是未有人来解答。我自己回答一下吧,如有不足望各位补充。
目前手机市场鱼龙混杂,高端如iPhone6 Plus,低端如Android 2.2(不是黑Android,确实如此),那么屏幕的分辨率也各式各样。经过长时间的摸索与实践,尤其各类微信活动开发过程中得到的经验,我在此分享给大家。
<head>部分引用:
<!--移动端版本兼容 -->
<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 -->
vw和vh定义百分比即可,就是多了要算的步骤。
Viewport,图片width100%
友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群