首页 web前端 H5教程 html移动端页面、图片多少宽度最合适?

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

May 19, 2018 pm 02:57 PM

目前网站开发已经更多的转向移动端设计、制作,想询问一下移动端网页宽度多少合适?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,确实如此),那么屏幕的分辨率也各式各样。经过长时间的摸索与实践,尤其各类微信活动开发过程中得到的经验,我在此分享给大家。
部分引用:

<!--移动端版本兼容 --><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 -->
登录后复制

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


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

h5项目怎么运行 h5项目怎么运行 Apr 06, 2025 pm 12:21 PM

运行 H5 项目需要以下步骤:安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境,创建项目文件夹、初始化项目、编写代码。启动开发服务器,使用命令行运行命令。在浏览器中预览项目,输入开发服务器 URL。发布项目,优化代码、部署项目、设置 Web 服务器配置。

H5页面制作究竟指什么 H5页面制作究竟指什么 Apr 06, 2025 am 07:18 AM

H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术,创建跨平台兼容的网页。其核心在于浏览器解析代码,渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误,应使用开发者工具调试;而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等,以提高加载速度和代码质量。

h5怎么制作点击图标 h5怎么制作点击图标 Apr 06, 2025 pm 12:15 PM

制作 H5 点击图标的步骤包括:在图像编辑软件中准备方形源图像。在 H5 编辑器中添加交互性,设置点击事件。创建覆盖整个图标的热点。设置点击事件的操作,如跳转页面或触发动画。导出 H5 文档为 HTML、CSS 和 JavaScript 文件。将导出的文件部署到网站或其他平台。

H5页面制作适合哪些应用场景 H5页面制作适合哪些应用场景 Apr 05, 2025 pm 11:36 PM

H5(HTML5)适合应用于轻量级应用,如营销活动页面、产品展示页面和企业宣传微网站。它优势在于跨平台性和丰富的交互性,但局限性在于复杂的交互和动画、本地资源访问和离线功能。

H5页面制作是前端开发吗 H5页面制作是前端开发吗 Apr 05, 2025 pm 11:42 PM

是的,H5页面制作是前端开发的重要实现方式,涉及HTML、CSS和JavaScript等核心技术。开发者通过巧妙结合这些技术,例如使用&lt;canvas&gt;标签绘制图形或使用JavaScript控制交互行为,构建出动态且功能强大的H5页面。

什么是H5编程语言? 什么是H5编程语言? Apr 03, 2025 am 12:16 AM

H5不是独立编程语言,而是HTML5、CSS3和JavaScript的集合,用于构建现代Web应用。1.HTML5定义网页结构和内容,提供新标签和API。2.CSS3控制样式和布局,引入动画等新特性。3.JavaScript实现动态交互,通过DOM操作和异步请求增强功能。

H5指的是什么?探索上下文 H5指的是什么?探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

h5怎么制作弹窗 h5怎么制作弹窗 Apr 06, 2025 pm 12:12 PM

H5 弹窗制作步骤:1. 确定触发方式(点击式、时间式、退出式、滚动式);2. 设计内容(标题、正文、行动按钮);3. 设置样式(大小、颜色、字体、背景);4. 实现代码(HTML、CSS、JavaScript);5. 测试和部署。

See all articles