首页前端开发HTMLhtml移动端页面、图片多少宽度最合适?

html移动端页面、图片多少宽度最合适?

时间2024-01-23 10:48:48发布访客分类HTML浏览403
导读:收集整理的这篇文章主要介绍了html移动端页面、图片多少宽度最合适?,觉得挺不错的,现在分享给大家,也给大家做个参考。目前网站开发已经更多的转向移动端设计、制作,想询问一下移动端网页宽度多少合适?960px、640px、480px、320p...
收集整理的这篇文章主要介绍了html移动端页面、图片多少宽度最合适?,觉得挺不错的,现在分享给大家,也给大家做个参考。目前网站开发已经更多的转向移动端设计、制作,想询问一下移动端网页宽度多少合适?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事件里添加一份,这样页面发生变化,也会自动适应. 不谢邀,这种看需求和设计的事拿出来问有意义么?
才疏学浅,看不懂 @王崇悟写的东西有啥实际意义。

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%

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: 详细介绍基于HTML5 的WebGL技术构...下一篇:使用HMTL5 API监控前端性能猜你在找的html5相关文章 关于移动端h5开发相关内容总结2022-05-17html5教程-学表单的第二天2018-12-10html5教程-HTML5浏览器支持2018-12-10html5教程-HTML5智能表单2018-12-10html5教程-微信H5使用resLoader实现加载页效果2018-12-10html5教程-day01-初级-JS0-热身运动JS入门教程2018-12-10html5教程-html5shiv.js和respond.min.js2018-12-10html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性2018-12-10html5教程-使用Html5实现手风琴案例2018-12-10html5教程-html5笔记2018-12-10 其他相关热搜词更多phpjavapython程序员load

若转载请注明出处: html移动端页面、图片多少宽度最合适?
本文地址: https://pptw.com/jishu/584099.html
使用HMTL5 API监控前端性能 SVG基础|SVG图形填充颜色

游客 回复需填写必要信息