Flex布局应用（1）——为什么flex只能做移动端APP开发？

最新推荐文章于 2024-08-02 20:34:24 发布
最新推荐文章于 2024-08-02 20:34:24 发布
阅读量8.7k 收藏 2
点赞数 3
分类专栏： Flex布局 文章标签： flex 原生APP 混合APP web APP flex兼容性问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxy9602/article/details/53173340
版权
本文分析了原生APP、混合APP和WEB APP的差异，指出移动端和PC端在用户交互、数据量及用户体验上的区别。特别讨论了在移动端APP中使用Flex布局的原因，尽管存在如PC端IE低版本不支持和部分移动端浏览器兼容性问题，但移动端仍广泛采用Flex以优化布局和节省流量。
摘要由CSDN通过智能技术生成

1、APP的分类

（1）原生APP

（2）混合APP

（3）WEB APP


2、PC端和移动端的差别

（1）用户交互方式不同：表现在鼠标、手指

（2）呈现的数据量不同：

PC端——屏幕大、内容多

移动端——内容少

最低0.47元/天 解锁文章
pdsu_zhao
关注
专栏目录
前端技术—9.flex布局
不放手，不错过的博客
08-02 325
flex布局基本属性及概念
移动端的布局：flex布局
cmy_1994的博客
03-17 945
一、简单介绍flex Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为Flex布局。 Webkit内核的浏览器，必须加上-webkit前缀。 ***注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 .parent {display:-webkit-flex;}
前端的学习-CSS（弹性布局-flex）
最新发布
m0_68823256的博客
08-02 2315
CSS的定位-给父元素设置的属性
移动端：（弹性布局）flex布局
illion booked
05-12 612
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活
flex-常见移动端布局
IT子也
03-06 1147
最近在开发一个微信小程序的项目，用flex布局那叫一个爽，这里记录一下心得。 这里不再累诉flex的基础知识了(可以到以下链接学习，网上有很多) http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/494230cd4a72 1、九宫格 <style type="text...
移动端flex布局经验总结
qq_44441669的博客
08-03 548
flex布局（弹性布局） 2.布局原理 2.1 flex是flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。 伸缩布局=弹性布局=伸缩盒布局=flex布局。 总结flex布局原理： 就是通过给父盒子添加flex属性，来控制...
移动端布局——Flex布局
m0_45659764的博客
04-02 2087
一、Flex布局 思考 多个盒子横向排列使用什么属性？ 浮动 设置盒子间的间距使用什么属性？ margin 需要注意什么问题？ 浮动的盒子脱标 Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用) 是一种浏览器提倡的布局模型 非常适合结构化的布局（左右、上下...） 布局网页更简单、灵活 避免浮动脱标的问题 一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本 1.1 Flex布局模型构成 作用 基于Fl...
淘宝首部布局——pc与app端flex弹性布局
weixin_64948861的博客
04-27 456
淘宝首部布局——pc与app端flex弹性布局 1.引入库 *用div写入内容，link引入css样式 代码如下（示例）： 免费 注册 客服中心 长 为 森 玲 分类1 分类2 分类3 分类4 分类5 分类6 1 智 逸 智 5 智
移动web网页开发（上篇）——流式布局（百分比布局）和Flex弹性布局
m0_53619602的博客
06-09 1275
前面我们学习的一直都是pc端的页面布局，也称为传统布局。传统布局的优点在于兼容性好，但它局限性除了布局繁琐外，在移动端不能很好的布局。为了解决这个问题就出现了两个xuanze——单独制作移动端的页面和响应式页面。 单独制作移动端页面可以分为流式布局（百分比布局），flex弹性布局，less+rem+媒体查询布局，混合布局。...
移动应用开发——uni-app框架 仿网易云音乐播放器学习心得
m0_72525173的博客
05-24 1897
1.什么是 uni-appuni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端。uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。uniapp框架的跨平台特性非常优秀，可以让我们在一次开发中同时支持多个平台，包括微信小程序、支付宝小程序、百度小程序、H5、App等。这大大提高了开发效率。
为移动端设计基于Flex的UI框架
08-10
为移动端设计，基于 Flex 的 UI 框架。现代化：基于 Flex 设计，支持移动端全部主流浏览器，支持 Android 微信内置浏览器；
快速了解移动端常用布局：flex布局
qq_39025670的博客
11-11 356
本文介绍了flex布局中常用的属性 display: flex; 代码： <section class="container"> <style> .container{ display: flex; } .box{ width: 100px; height: 100px; } ...
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
weixin_30661579的博客
06-10 340
viewport视口viewport是严格的等于浏览器的窗口。viewport与跟viewport有关的meta标签的关系，详细建议读一读这篇文章：移动前端开发之viewport的深刻理解，viewport与布局的关系，能够看下这篇文章：在移动浏览器中使用viewport元标签控制布局css1. flex布局flex简介之因此把flex布局放在第一位，是由于它在某些场景下确实很方便，好比垂直居中，...
Flex布局学习完成PC端
小琳爱分享的博客
07-26 544
Flex布局学习完成PC端
flex布局
weixin_30597269的博客
08-20 175
Flex语法 Flex布局意为"弹性布局"，用来为盒模型提供更多灵活性。此外，Flex定义的容器可以对块级元素(display: flex;)或行内元素(display: inline-flex;)生效，需要注意的是，如果父元素设置了Flex容器，则子元素的float、clear和vertical-align属性将失效。 Flex布局需要注意下面几个重要的概念，结合下面这张图也许能更好的理解:...
Flex移动开发第一步(Flex Mobile View and ViewNavigator组件学习笔记)
九天之凤
08-22 1400
历史背景     在传统的Flex AIR桌面应用程序开发中，我们有足够的屏幕分辨率以及系统资源来在屏幕下填充足够的信息已满足我们的开发需求。通过采用分层菜单和弹出窗口，我们可以在屏幕上堆砌足够多的信息。与此相比，智能手机的屏幕感觉像stamp。由于分辨率以及不同设备DPI的影响，Flex mobile开发通常采用Screen Split技术，将页面切分成很多部分来展示。Flex mobil
flex布局（上）
weixin_48692423的博客
09-08 336
flex主轴与侧轴的布局方法
微信小程序开发：Flex布局详解——打造计算器应用
1. **Flex布局的启用** 在小程序中，要启用Flex布局，需要将容器元素的display属性设置为`flex`。一旦启用，原本对浮动（float）、清除（clear）和垂直对齐（vertical-align）的控制将不再有效。这使得Flex布局能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值