- 综合排序
- 最热优先
- 最新优先
- 来自专栏睡不着所以学编程
移动web开发(3)之flex弹性布局
移动web开发之flex布局 建议: 如果是PC端页面布局,我们还是传统布局 如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局. > </head> <body>
1 2 3< 我们也可以设置盒子的顺序,在不改变结构的前提下,比如说,我想将三号盒子放在最前面,我们就可以使用order属性: 下一章就是根据所学知识做一个携程网移动端案例.1.3K11编辑于 2022-09-20来自专栏全栈程序员必看java移动端开发_移动端开发
1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。 好在HTML给我们提供了一个关键字device-width ，该关键是读取当前移动设备的宽度。 因此，我们只需要使用下面的代码，即可让所有移动设备的视口宽度和其自身的宽度相等。 3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。 这样一来，就要求我们在开发移动端的页面时，当遇到字体大小、宽高、margin、padding等尺寸类的属性时，不能设置固定的像素值。 注：border边框大小除外 (既然有问题，怎么会没有解决办法呢？ 注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？
6.4K20编辑于 2022-09-12来自专栏睡不着所以学编程移动web开发
今天终于进入前端的新篇章啦,现在开始学习web开发. 移动web开发之流式布局 01 移动端基础 浏览器现状 比如我们现在用谷歌浏览器打开刚刚做的旋转木马,按下F12进入调试界面,就能看到一个小手机的图标,这样我们就能模拟手机进行调试了, 通常使用二倍图,因为iPhone7/8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求 背景图片注意缩放问题. contain: contain只要宽度或者高度一条边够到了就可以:图片中,宽度已经达到了所以不再继续放大. 04 移动端开发选择 单独移动端页面(主流) 通常情况下,网站域名前面加m(mobile )可以打开移动端,如果是移动设备打开,则跳转移动端页面.
3.2K21编辑于 2022-09-20来自专栏White feathe 的博客移动开发实用
font-family 中文字体使用系统默认即可，英文用Helvetica /* 移动端定义字体的代码 */ body{font-family:Helvetica;} 参考《移动端使用字体的思考》 移动端字体单位font-size选择px还是rem，对于只需要适配手机设备，使用px即可，对于需要适配各种移动设备，使用rem，例如：只需要适配iPhone和iPad等分辨率差别比较挺大的设备 rem 造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说 是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。 : translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 》 设计高性能CSS3动画的几个要素 尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位 利用translate3D开启GPU加速
8.5K30编辑于 2021-12-08来自专栏编程微刊移动开发之css3实现背景几种渐变效果
移动端背景渐变，非常的年轻，符合90后年轻一代的审美，css3的这个渐变目前主要是应用在手机前端领域。 =device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移动开发之 =device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移动开发之 =device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移动开发之 =device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移动开发之
1.2K20发布于 2018-05-31来自专栏老马寒门IT05-移动端开发教程-CSS3兼容处理
CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。 浏览器有时会给一些在试验阶段或非标准阶段的css属性添加前缀, 这样开发者就可以使用 浏览器行为的改变不会破坏标准. 开发人员应等待包含无前缀属性，直到浏览器行为标准化。 1. ，目前大部分常用的css3新属性都可以直接舍弃前缀。 由于添加前缀工作都是否枯燥和没有意义，这些工作可以直接交给开发工具或者第三方的工具来自动化的实现处理。 添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。
1.9K60发布于 2018-01-02来自专栏老马寒门IT01-移动端开发教程-CSS3新特性
移动端开发课程概述 移动互联网的兴起，让移动端的开发迅速蹿红。对于前端开发者来说，移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端开发的相关前端开发技术。 这边课程内容包括： CSS3新特性 新选择器 边框、背景升级、圆角、阴影 新的盒模型 渐变、动画、2D3D转换 伸缩布局、多列布局 新单位 在线字体图标 前缀应用、浏览器兼容、渐进增强 媒体查询 移动端适配开发方案 响应式布局开发方案 移动端js、触屏事件 zepto.js\bootstrap\iScroll.js\fastclick.js等移动端库 移动端开发调试 移动端完整项目 2. 关于CSS3的学习 2.1 CSS3学习手册 学习CSS3最好的工具就是文档。有文档在手，按照文档多练习一些案例，就能掌握。CSS算是比较容易学习的前端技术了。 后面都会学习： 比如：开发工具前缀插件、gulp自动化处理、webpack自动化处理。CSS预处理和后处理的语言都可以实现编译时处理。 3.
3.1K70发布于 2018-01-05来自专栏老马寒门IT05-移动端开发教程-CSS3兼容处理
CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。 浏览器有时会给一些在试验阶段或非标准阶段的css属性添加前缀, 这样开发者就可以使用 浏览器行为的改变不会破坏标准. 开发人员应等待包含无前缀属性，直到浏览器行为标准化。 1. ，目前大部分常用的css3新属性都可以直接舍弃前缀。 由于添加前缀工作都是否枯燥和没有意义，这些工作可以直接交给开发工具或者第三方的工具来自动化的实现处理。 $ npm init -y # 初始化项目的npm配置文件 $ npm i -S gulp # 安装gulp到本地项目（仅开发时使用，S大写） $ npm i -S gulp-autoprefixer
2.3K120发布于 2018-04-02来自专栏移动开发平台移动开发即服务，腾讯云移动开发平台打造开发新模式
互联网“下半场”，移动App开发对于质量、效率的要求更加苛刻。传统移动开发的模式是移动开发者手动集成所需的各种移动服务，和后台服务紧耦合去打造精品移动应用。 为了更好的帮助移动开发者提升效率，腾讯云，崩溃监控bugly，移动推送信鸽，移动分析MTA，腾讯计费米大师联手打造腾讯云移动开发平台MobileLine，首推零代码集成，基于配置的云端一体化闭环开发体验 三、赢在起跑线，打造云端一体化开发模式 腾讯云移动开发平台MobileLine针对开发者比较普遍的需求，首先开放一些开发者需求比较迫切的移动服务，让移动开发者能够享受到腾讯在移动开发这里成熟的积累，实现云和端一体化的闭环开发体验 腾讯移动推送(信鸽)：专业的移动 App 推送服务，支持百亿级的通知/消息推送，秒级触达移动用户。 3. 四、全链条、全方位的移动开发服务，让App开发者聚焦核心业务 腾讯打造移动开发生态多年，已经形成了一整套全链条、全方面的移动服务。
14.4K80发布于 2018-05-03来自专栏老马寒门IT01-移动端开发教程-CSS3新特性（上）
移动端开发课程概述 移动互联网的兴起，让移动端的开发迅速蹿红。对于前端开发者来说，移动端的开发已经占据了他们大部分工作时间。接下来老马带大家一起学习移动端开发的相关前端开发技术。 这边课程内容包括： CSS3新特性 新选择器 边框、背景升级、圆角、阴影 新的盒模型 渐变、动画、2D3D转换 伸缩布局、多列布局 新单位 在线字体图标 前缀应用、浏览器兼容、渐进增强 媒体查询 移动端适配开发方案 响应式布局开发方案 移动端js、触屏事件 zepto.js\bootstrap\iScroll.js\fastclick.js等移动端库 移动端开发调试 移动端完整项目 2. 关于CSS3的学习 2.1 CSS3学习手册 学习CSS3最好的工具就是文档。有文档在手，按照文档多练习一些案例，就能掌握。CSS算是比较容易学习的前端技术了。 后面都会学习： 比如：开发工具前缀插件、gulp自动化处理、webpack自动化处理。CSS预处理和后处理的语言都可以实现编译时处理。 3.
2K01发布于 2017-12-20来自专栏XC's Blog 日常笔记移动开发-Flex布局
移动开发-flex弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 如果是PC端页面布局，我们还是传统布局 如果是移动端或者不考虑兼容性问题的
1.8K10编辑于 2022-11-12来自专栏老马寒门IT02-移动端开发教程-CSS3新特性（中）
可以设置两个值，类型可以是：百分比、像素、位置名（left、top、bottom、right） 移动 translate(x, y) 可以改变元素的位置，x、y可为负值，带像素坐标。 立体3D转换 6.1 立体3D的坐标轴 注意：x\y\z的正值的方向。 3D坐标图 左手坐标系 css3中旋转后都是按照左手坐标系进行运转。旋转的正值的方向就是：手指弯曲的方向。 移动 translate3d(tx, ty, tz) 可以改变元素的位置，x、y,z可为负值，带像素坐标。 (12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3 显示模式 transform-style: 可选值：flat（2D默认值） ，preserve-3d （3D） 要想有3D的显示效果，请选择preserve-3d。
2.7K00发布于 2017-12-20来自专栏老马寒门IT03-移动端开发教程-CSS3新特性（下）
CSS3动画 1.1 过渡的缺点 transition的优点在于简单易用，但是它有几个很大的局限。 transition需要事件触发，所以没法在网页加载时自动发生。 align-content 2.7 设置子盒子的排序order css3新增加order属性定义项目的排列顺序,是数值类型。数值越小，排列越靠前，默认为0。 .item1 { flex-grow: 5; } .item2 { flex-grow: 4; } .item3 { flex-grow: 3; } .item4 { flex-grow 3. 多列布局 CSS3为类似于报纸、文章、杂志那种长篇文章进行多列排版的需求，提供了多列布局的样式设置。 column-width 给列定义个最小的宽度。 默认值auto各列的高度随内容自动调整，balance所有列高都设为最高的列高 下一篇内容预告： web在线字体 css3兼容处理 移动web开发基础
1.7K130发布于 2018-04-02来自专栏老马寒门IT02-移动端开发教程-CSS3新特性（中）
可以设置两个值，类型可以是：百分比、像素、位置名（left、top、bottom、right） 移动 translate(x, y) 可以改变元素的位置，x、y可为负值，带像素坐标。 立体3D转换 CSS3给我们带来惊喜的是3D的转换，给页面的效果带来了无限的可能。 大家先建立3D模型思维，看看下面图是否能在内心中体会在3D空间中沿着X、Y、Z轴进行旋转。 ? 3D旋转 6.1 立体3D的坐标轴 注意：x\y\z的正值的方向。 ? 3D坐标图 ? 6.2 立体3D转换的操作 transform的3D操作属性 移动 translate3d(tx, ty, tz) 可以改变元素的位置，x、y,z可为负值，带像素坐标。 translate3d(10px,0px,0px)。z方向的移动必须配合perspective。
1.8K80发布于 2018-04-02来自专栏老马寒门IT03-移动端开发教程-CSS3新特性（下）
CSS3动画 1.1 过渡的缺点 transition的优点在于简单易用，但是它有几个很大的局限。 transition需要事件触发，所以没法在网页加载时自动发生。 align-content 2.7 设置子盒子的排序order css3新增加order属性定义项目的排列顺序,是数值类型。数值越小，排列越靠前，默认为0。 .item1 { flex-grow: 5; } .item2 { flex-grow: 4; } .item3 { flex-grow: 3; } .item4 { flex-grow 多列布局 CSS3为类似于报纸、文章、杂志那种长篇文章进行多列排版的需求，提供了多列布局的样式设置。 column-width 给列定义个最小的宽度。 默认值auto各列的高度随内容自动调整，balance所有列高都设为最高的列高 下一篇内容预告： web在线字体 css3兼容处理 移动web开发基础 联系老马 对应视频地址：https://qtxh.ke.qq.com
1.7K00发布于 2017-12-27来自专栏iOSDevLogUnity 3D 开发《王者荣耀》：英雄移动地图英雄
导入模型资源包，拖入草，制作成草丛，再 duplicate 3 个，放到红蓝 Buffer 的附近。 拖入敌我双方防御塔，上不同的材质。复制几份，把中路塔放满。 = 0; public const int RUN = 1; public const int ATTACK1 = 2; public const int ATTACK2 = 3; + joyPositionX, transform.position.y, transform.position.z + joyPositionY)); //移动玩家的位置（按朝向位置移动 相机跟随 player 移动的时候，地图没有更新，player 会跑到地图外面，所以我们还要再改进一下，让相机跟随 player 移动。 有两种方法 第一种是为相机添加脚本，是我们自己编写的脚本。 cameraX, y, cameraZ + z); } } } 相机的高度 y 保持不变，x 和 z 跟随 player 位置移动。
2.1K30发布于 2018-06-21来自专栏grain先森移动端开发总结
如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。 如果是复杂的动画可以使用css3+js（或者html5+css3+js）配合开发，效果只有想不到，没有做不到。 1.web移动前端有哪些优化方案？ 2.web移动端页面性能优化方案 3.Web前端优化最佳实践及工具集锦 4.移动前端系列——移动页面性能优化 5.Web性能优化：图片优化 16.小结 我在移动web(手机网站)上，遇到的问题，暂时就是上面这些了 如果大家在开发移动网站的时候，有遇到过什么大大小小的问题，在评论或者自己以文章方式提醒！方便让以后的避免踩坑！最后，如果大家有什么补充或者觉得我哪里写得不好，写错了！欢迎指点！
3.2K10发布于 2019-03-28来自专栏XC's Blog 日常笔记移动开发-流式布局
移动开发-百分比布局 流失布局案例: 京东商城: 点击查看 通过盒子宽度设置百分比来根据屏幕宽度来进行伸缩，不受固定像素限制，内容向两侧填充 流式布局，就是百分比布局，也称非固定像素布局 max-width 称为物理像素比或屏幕像素比，1CSS像素=1物理像素 多倍图: 在标准viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题 通常使用二倍图， 因为iPhone6\7\8影响，还存在3倍 4倍图的情况，这个看实际开发需求 background-size: 50px 50px; /*原始图片100*100px*/ 关于更多: background-size 属性 多倍图切图 cutterman : 图片 移动端主流方案: 单独制作移动端页面 (主流)，通过判断设备，如果是移动设备打开，则跳到移动端页面 响应式兼容移动端 (其次)，通过判断屏幕宽度来改变样式，以适应不同终端, 制作麻烦，需要花很大精力去调兼容性问题 移动端浏览器: 移动端浏览器基本以**webkit 内核**为主，因此我们就考虑webkit兼容性问题 同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可 图片 特殊样式: /*CSS3
1.6K30编辑于 2022-11-12来自专栏十月梦想移动端开发初识
对于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标签一般只需要一下的属性就行 <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=no" /> 我们不喜欢用户进行缩放,直接我们在开发过程中,转换成对应的物理像素能较好的观察哦设备的显示效果
1.4K40发布于 2018-08-29来自专栏张善友的专栏移动站点开发
作者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 部分
3.2K80发布于 2018-01-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号