文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    java移动端开发_移动端开发

    1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。...好在HTML给我们提供了一个关键字device-width ，该关键是读取当前移动设备的宽度。 因此，我们只需要使用下面的代码，即可让所有移动设备的视口宽度和其自身的宽度相等。...3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。...这样一来，就要求我们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。 注：border边框大小除外 (既然有问题，怎么会没有解决办法呢？...注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？

    5K20

    移动开发实用

    font-family 中文字体使用系统默认即可，英文用Helvetica /* 移动端定义字体的代码 */ body{font-family:Helvetica;} 参考《移动端使用字体的思考》...移动端字体单位font-size选择px还是rem，对于只需要适配手机设备，使用px即可，对于需要适配各种移动设备，使用rem，例如：只需要适配iPhone和iPad等分辨率差别比较挺大的设备 rem...200-300 ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。...造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说 是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。...，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下， <!

    6.5K30

    移动开发即服务，腾讯云移动开发平台打造开发新模式

    互联网“下半场”，移动App开发对于质量、效率的要求更加苛刻。传统移动开发的模式是移动开发者手动集成所需的各种移动服务，和后台服务紧耦合去打造精品移动应用。...为了更好的帮助移动开发者提升效率，腾讯云，崩溃监控bugly，移动推送信鸽，移动分析MTA，腾讯计费米大师联手打造腾讯云移动开发平台MobileLine，首推零代码集成，基于配置的云端一体化闭环开发体验...，借助腾讯在移动应用开发领域的成熟积累，帮助移动开发者低成本、快速的构建弹性、高质量的精品应用。...三、赢在起跑线，打造云端一体化开发模式 腾讯云移动开发平台MobileLine针对开发者比较普遍的需求，首先开放一些开发者需求比较迫切的移动服务，让移动开发者能够享受到腾讯在移动开发这里成熟的积累，实现云和端一体化的闭环开发体验...四、全链条、全方位的移动开发服务，让App开发者聚焦核心业务 腾讯打造移动开发生态多年，已经形成了一整套全链条、全方面的移动服务。

    31.6K420

    移动开发即服务，腾讯云移动开发平台打造开发新模式

    互联网“下半场”，移动App开发对于质量、效率的要求更加苛刻。传统移动开发的模式是移动开发者手动集成所需的各种移动服务，和后台服务紧耦合去打造精品移动应用。...为了更好的帮助移动开发者提升效率，腾讯云，崩溃监控bugly，移动推送信鸽，移动分析MTA，腾讯计费米大师联手打造腾讯云移动开发平台MobileLine，首推零代码集成，基于配置的云端一体化闭环开发体验...，借助腾讯在移动应用开发领域的成熟积累，帮助移动开发者低成本、快速的构建弹性、高质量的精品应用。...三、赢在起跑线，打造云端一体化开发模式 腾讯云移动开发平台MobileLine针对开发者比较普遍的需求，首先开放一些开发者需求比较迫切的移动服务，让移动开发者能够享受到腾讯在移动开发这里成熟的积累，实现云和端一体化的闭环开发体验...四、全链条、全方位的移动开发服务，让App开发者聚焦核心业务 腾讯打造移动开发生态多年，已经形成了一整套全链条、全方面的移动服务。

    13.1K80

    移动站点开发

    作者Dino Esposito 尝试从不主要侧重于技术的角度阐述移动站点开发，是每个web开发人员必读的系列文章，文章如下： 移动站点开发：第 1 部分 标记 移动站点开发，第 2 部分：设计 移动站点开发...，第 3 部分：路由请求 移动站点开发，第 4 部分：管理设备配置文件 移动站点开发，第 5 部分：jQuery Mobile Introduction to jQuery Mobile Making...dotnetstories/archive/2012/11/13/looking-into-asp-net-mvc-4-0-mobile-development-part-2.aspx 使用ASP.NET MVC开发混合移动应用...开发 Hybrid Native 和移动 Web 应用程序 Using jQuery Mobile in an ASP.NET MVC 4 and SignalR Application https:...//github.com/geffzhang/MobileMasses 在 ASP.NET MVC 4 中创建为移动设备优化的视图 在 ASP.NET MVC 4 中创建为移动设备优化的视图，第 2 部分

    2.8K80

    移动开发-流式布局

    移动开发-百分比布局 流失布局案例: 京东商城: 点击查看 通过盒子宽度设置百分比来根据屏幕宽度来进行伸缩，不受固定像素限制，内容向两侧填充 流式布局，就是百分比布局，也称非固定像素布局 max-width...最大宽度 – max-height 最大高度 min-width 最小宽度 – min-height 最小高度 图片 CSS初始化 normalize.css: 移动端CSS初始化推荐使用normalize.css...1CSS像素=1物理像素 多倍图: 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题 通常使用二倍图， 因为iPhone6\7\8影响，还存在3倍4倍图的情况，这个看实际开发需求...background-size: 50px 50px; /*原始图片100*100px*/ 关于更多: background-size 属性 多倍图切图 cutterman: 图片 移动端主流方案:...单独制作移动端页面 (主流)，通过判断设备，如果是移动设备打开，则跳到移动端页面 响应式兼容移动端 (其次)，通过判断屏幕宽度来改变样式，以适应不同终端, 制作麻烦，需要花很大精力去调兼容性问题 移动端浏览器

    1K30

    移动端开发总结

    如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。...这个只是我自己在开发的时候知道的坑，如果大家有遇到什么别的坑，欢迎补充，或者觉得我哪里写错了，欢迎指点！...1.web移动前端有哪些优化方案？...2.web移动端页面性能优化方案 3.Web前端优化最佳实践及工具集锦 4.移动前端系列——移动页面性能优化 5.Web性能优化：图片优化 16.小结 我在移动web(手机网站)上，遇到的问题，暂时就是上面这些了...如果大家在开发移动网站的时候，有遇到过什么大大小小的问题，在评论或者自己以文章方式提醒！方便让以后的避免踩坑！最后，如果大家有什么补充或者觉得我哪里写得不好，写错了！欢迎指点！

    2.6K10

    移动端开发初识

    对于pc端的前端开发以及html5和css3学习过后对页面布局更加熟练了,对于现在开发更多倾向于移动端开发,对于移动端开发和传统PC开发又有所不同,下面简单认识下移动端开发概况!...对于学习移动端开发首先要了解下面三个概念(设备独立像素,物理像素,和像素比),下面简单介绍下这三个概念!...上面说过的设备独立像素如何改变,下面就看看使用移动端开发的meta的viewport标签 <meta name="viewport" content="width=device-width,initial-scale...minimum-scale=1,maximum-scale=1//最大最小缩放比例,一般不用设置 <em>移动</em>端<em>开发</em>的meta标签一般只需要一下的属性就行 我们不喜欢用户进行缩放,直接我们在<em>开发</em>过程中,转换成对应的物理像素能较好的观察哦设备的显示效果

    1K40

    移动web开发介绍

    视口(viewport) 视口（viewport）浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口和理想视口 布局视口(layout viewport) 一般移动设备的浏览器默认设置了一个布局视口...user-scalable 用户是否可以缩放 二倍图 物理像素&物理像素比 物理像素点是只屏幕显示的最小颗粒，是物理真实存在的，设置厂商在出厂时就设定好了的如某手机分辨率为 750*1334 我们在移动...web开发时1px不一定等于1物理像素 而在pc页面1px是等于1物理像素的 一个px能显示的物理像素点的个数，称为物理像素比或者屏幕像素比 如下例 定义一个300*300的盒子 在pc显示正常1px=...web开发 1px！...，但此时不会模糊，因为图片之前就是移动端放大后的大小 img{ width:50px; height:50px; } ...

    1.2K10

    移动开发-响应式

    移动开发-响应式布局 响应式开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备 设备划分 尺寸区间 超小屏幕 (手机) < 768px 小屏设备 (平板) >= 768px...使用者要按照框架所规定的某种规范进行开发 Bootstrap优点: 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈，不断的更新迭代 让开发更简单，提高开发的效率 2.3.2...：停止维护,兼容性好,代码不够简洁，功能不够完善 3.4.1：稳定, 但放弃了IE6-IE7，对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的Web项目 4.6.1 ：最新版，目前还不是很流行...viewport) 的容器 栅格系统介绍: 栅格系统英文为 Grid systems ,翻译为网格系统，是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局 Bootstrap提供了一套响应式、移动设备优先的流式栅格系统...大屏 .hidden-xs 隐藏 可见 可见 可见 .hidden-sm 可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 为了加快对移动设备友好的页面开发工作

    2.4K20

    移动web开发(2)

    移动端技术选型 流式布局(百分比布局) 流式布局,就是百分比布局,也称非固定像素布局 通过盒子的宽度设置为百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充....流式布局方式是移动web开发使用的比较常见的布局方式. 比如说,我们想要一个盒子里面放两个小盒子,那我们就采取流失布局,主要是宽度要采取百分比的形式. 当然我们也要限制宽度,不能无限的缩放,为了保护我们盒子里的内容,我们还有两个方法: 最大宽度: max-width; 最小宽度: min-width; 现在又要做案例啦,这次是京东的移动端页面...技术选型 方案:我们采取单独制作移动端页面方案 技术:采取流式布局 放一些做案例时的小细节: 这次的案例就是做了一个这样的京东移动端的页面,比较简陋,但是也不简单

    71511

    移动端开发流程

    cnpm) 包管理工具 yarn add axios -S cnpm install axios -S -S: --save-dev 生产环境的依赖 （dependencies） -D: --dev 开发环境的依赖...在命令窗口中使用vue ui，弹出页面 使用模块 多环境变量配置（开发、测试、生产） axios 请求拦截，响应拦截 (API统一管理) sass 预编译 rem移动端适配方案 vant-ui 按需导入...我们写入请求拦截和响应拦截，进行API的统一管理，请求分两种形式：分别为get , post 形式进行传参 3.sass预解析：意思就是说将浏览器不能识别的css代码转换成浏览器能识别的 4.rem：针对于移动端的适配问题...初始化样式问题 —我们可以在(reset.css中引入项目) 例如 box-sizing:border-box 三、路由 我们经常用的有 路由嵌套 路由传参 路由守卫 keep-alive 四、组件化开发...1.组件拆分问题：我们可以封装公共组件、功能性组件 2.组件开发：父传子、子传父、兄弟传值 五、webpack配置的打包优化（vue.config.js） 发布者：全栈程序员栈长，转载请注明出处：https

    1.3K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券