Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

不言
Freigeben: 2018-05-19 14:57:48
Original
10318 Leute haben es durchsucht

目前网站开发已经更多的转向移动端设计、制作,想询问一下移动端网页宽度多少合适?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');
Nach dem Login kopieren

页面启动执行一下就可以了,也可以在onsize事件里添加一份,这样页面发生变化,也会自动适应. 不谢邀,这种看需求和设计的事拿出来问有意义么?
才疏学浅,看不懂 @王崇悟写的东西有啥实际意义。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Nach dem Login kopieren

我在公司做了一年移动端开发了,设计给过来的视觉稿比较常见的有两个,640跟750。
建议你可以看看淘宝的flexible解决方案。
详见:
移动端高清、多屏适配方案
补充:
移动端适配方案浅析 制作了很长时间的wap站点,这个问题还是未有人来解答。我自己回答一下吧,如有不足望各位补充。
目前手机市场鱼龙混杂,高端如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(&#39;<meta name="viewport" content="width=640, minimum-scale = &#39;+phoneScale+&#39;, maximum-scale = &#39;+phoneScale+&#39;, target-densitydpi=device-dpi">&#39;);
           }else{
                 document.write(&#39;<meta name="viewport" content="width=640, target-densitydpi=device-dpi">&#39;);
           }
 } else {
       document.write(&#39;<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">&#39;);
 }</script><!--移动端版本兼容 end -->
Nach dem Login kopieren

vw和vh定义百分比即可,就是多了要算的步骤。 Viewport,图片width100%


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!