首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    移动H5开发基础

    文章目录 前言 一、移动屏幕相关概念 1. 屏幕尺寸 2. 屏幕分辨率 3. 屏幕像素密度(ppi = pixels per inch) 二、像素 1. 物理像素 2. CSS像素 3....系统 总结 ---- 前言 随着移动H5需求场景越来越多,例如微信公众号中H5页面的开发,APP中内嵌H5页面等,移动H5开发基础知识和技巧是前端开发工程师必备的技能~ ---- 一、移动屏幕相关概念...用户缩放 用户手动放大:1个CSS像素面积变大,区域内CSS像素个数减少,视觉视口尺寸变小 移动,用户缩放影响视觉视口的尺寸(布局视口影响布局(块换行等),引起重绘等,所以改变的是视觉视口) 2....系统 参照理想视口进行缩放,改变布局视口和视觉视口 meta: initial-scale=1.0 ---- 总结 移动和PC比,有很多特有的概念需要理解。...理解了这些基础概念,才能掌握移动H5开发技巧~ 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/151992.html原文链接:https://javaforall.cn

    1.5K20

    H5移动开发学习总结

    对于移动开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1.首先,选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。...如果把移动设备上浏览器的可视区域设为viewport的话,某些网站就会因为viewport太窄而显示错乱,所以这些浏览器就决定默认情况下把viewport设为一个较宽的值,比如980px,这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了...ideal viewport(完美视口):完美适配移动设备的viewport,它的宽度等于移动设备的屏幕宽度。有了完美视口,用户不用缩放和拖动网页就能够很好的进行网页浏览。...但是当屏幕超过一定的尺寸以后还继续显示h5页面的话会给用户带来不好的体验。因此,我们需要给页面设置最大的宽度和最小宽度。

    98720

    H5移动适配原理及方案

    工作中接触到了移动的开发,所以最近学习一下移动端相关内容。目前还是一个初学者,出现任何问题请多多谅解。...移动页面需要具备响应式设计,以适应不同大小和分辨率的移动设备屏幕。使用流体网格布局、弹性图片和媒体查询等技术,确保页面在各种设备上都能良好显示。...移动适配原理在学习移动适配原理之前,我们先了解一下在 VSCode 中自动生成的 head 标签中的 viewport。viewport 可以翻译为 视区 或者 视口。...由于移动设备和桌面设备有不同的屏幕尺寸和分辨率,使用视口可以使网页在不同设备上得到合适的显示。viewport 视口。如果要实现浏览器适配移动,首先我们要统一标准视口。...在移动常用到的是 rem,通过使用 rem 单位,可以相对于根元素的字体大小来定义布局和元素的尺寸,从而使网页更灵活地适应不同的屏幕尺寸。

    24910

    移动H5开发之页面适配篇

    最近开发并上线了一款H5项目,在这里想和大家分享一下关于项目中使用到的移动适配技巧,如果对你们有所帮助的话,就多多点赞收藏各位看官老爷别着急,在讲页面适配之前,我们先来捋一捋viewport(视口)的概念...一般我们所说的视口共包括三种:布局视口、视觉视口和理想视口1.1 布局视口图片在移动,布局视口被赋予一个默认值,大部分为980px,这保证PC的网页可以在手机浏览器上呈现,用户可以手动对网页进行放大。...淘宝的手淘团队,在做移动适配时,使用的flexible方案核心就是rem适配,打开他们的github源码,会发现比rem逻辑多了一些dpr的处理。...图片在说viewport方案之前,我们先来解决移动dpr普遍>=2的问题。...1.5 总结说了这么多,我们简单的来总结一下:1.对于需要移动、PC都正常展示的项目推荐使用rem布局;2.对于只在移动展示,且内容量较少的页面推荐使用vw布局;当然媒体查询@media也可以用来进行页面适配

    7.3K92

    H5开发移动APP基于H5+

    由于工作需要做个业务相对简单的应用,而又要iOS和Android,所以开始正式着手H5。...关于H5开发移动APP 优点: 很大的好处就是快速、简单、方便,一套代码几乎不用怎么修改就可以同时打包iOS、Android安装包。 基于前端各方面应用技术栈成熟,资料齐全。...有不少的平台和开发工具可供选择,集代码编辑、调试、打包几乎一条龙服务 , 基于H5+的环境与原生底层交互越来越多,很多功能界面在效果上几乎和原生的没啥区别。...开发工具框架之类的太多,如果一个不熟悉前端的新人过来,几乎不知道该如何下手。 所以对于一些业务逻辑简单,没有复杂的操作处理的应用,H5开发再好不过。...对一些重型的应用还是原生的为主,H5为辅助也是一个很好的搭配。 开始着手 首先开发工具及框架,我选择了 HBuilderX,一个牛逼而又好用的前端开发工具。 ?

    1.7K10

    移动H5知识 - fixed定位模式与其他

    TML5学堂:移动H5知识普及 - fixed定位模式与其他。虽然知识小,但是不得不承认的是,它们很重要~!...也算是移动H5知识这个系列的收尾吧~ fixed定位模式 position:fixed。表示生成绝对定位的元素,相对于浏览器窗口进行定位。...可谓不是一般的坑啊~因此,制作移动的时候,百分比坑多多(前面盒模型一部分也有所讲解),在制作移动的时候,个人还是首先推荐rem。...如果你的美工拿着一张320像素宽度的psd文件给你,你们老板让你去制作兼容各个分辨率的移动代码。我建议你:“呵呵两声,然后让美工返工~”。那么对于基准字体也是有要求的。...靠谱的美工不需要你去跟他沟通,因为他们本身就懂移动的相关设计。

    1.5K50
    领券