• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html移动端页面、图片多少宽度最合适?

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含320px,640px,960px,480px等相关知识,匿名希望在学习及工作中可以帮助到您
目前网站开发已经更多的转向移动端设计、制作,想询问一下移动端网页宽度多少合适?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%

您可能想查找下面的文章:

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

相关文章

  • 2018-12-03HTML5仿微信聊天界面和朋友圈代码
  • 2017-08-06用HTML5 实现橡皮擦的涂抹效果的教程
  • 2018-12-03HTML5实战与剖析之CSS选择器——getElementsByClassName()方法
  • 2018-12-03移动端Html5页面生成图片解决方案
  • 2018-12-03html5中audio支持音频格式的解决方法
  • 2018-12-03HTML5 Canvas动画设计解析
  • 2018-12-03探讨HTML5移动开发的几大特性(必看)_html5教程技巧
  • 2018-12-03详细介绍7 款超具个性的 HTML5 播放器的图文详解
  • 2018-12-03canvas文字怎么换行?canvas文字换行的方法介绍
  • 2018-12-03 小强的HTML5移动开发之路(12)——从一个多媒体标签说起

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦_html5教程技巧
    • 总结Uploadify使用方法
    • HTML5 window.postMessage与跨域的实例教程
    • 浅谈利用缓存来优化HTML5 Canvas程序的性能
    • html5 WebSocket在jetty7中实现的代码分享
    • Data URI scheme详解和使用实例及图片base64编码实现方法
    • 使用 HTML5 canvas 进行 Web 绘图
    • H5微信支付之引入微信的js-sdk包失败的解决方法
    • canvas中beginPath()和closePath()作用的实例解析
    • 小强的HTML5移动开发之路(18)——HTML5地理定位

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有