移动WEB学习 - Flex布局

已于 2022-09-22 22:45:58 修改
阅读量102 收藏
点赞数
分类专栏： 移动Web开发实战 文章标签： 学习 css css3
于 2022-09-22 07:05:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52647098/article/details/126814540
版权

一、移动端特点

  • PC端网页和移动端网页有什么不同？
    • PC屏幕大，网页要固定版心
    • 手机屏幕小，网页宽度多数为100%
  • 如何在电脑里面边写代码边调试移动端网页效果？
    • 谷歌模拟器
  • 分辨率
    • 屏幕尺寸

      • 指的是屏幕对角线的长度，一般用英寸来度量

    • PC分辨率

      • 1920(宽) * 1080(高)

      • 1366 * 768

    • 缩放150%

      • (1920/150%) * (1080/150%)

    • 总结

      • 硬件分辨率（出厂设置）

      • 缩放调节的分辨率（软件设置）

    • 分辨率分类

最低0.47元/天 解锁文章
qq_52647098
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用flex布局实现宽度自适应
R398562246的博客
09-24 6880
1.两侧固定，中间自适应 .box{ width:100%; display:flex; height:300px; } .left{ width:100px; height:200px; background-color:red; } .right{ width:100px; ...
移动web开发之flex布局
程序员柒的博客
07-06 433
本文讲解了移动web开发的flex布局，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力，先赞后看养成习惯。传统布局flex 弹性布局建议：1. 搭建HTML结构 2. CSS样式flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目
移动web开发实例flex布局案例源码
02-16
移动web开发实例flex布局案例源码
零零散散之flex相关属性、布局以及flex缩放
weixin_46837674的博客
09-10 1000
flex相关属性、布局以及flex缩放 默认情况下，容器中的所有子元素都将进行水平排列，类似于强制进行了一个左浮动，所以容器子元素的float和clear属性会失效。同时，容器中的子元素的对齐方式将不受vertical-align控制，即vertical-align也会失效。 display:flex子元素垂直水平居中的方式 display: flex; /* 水平方向对齐方式（上中下）: flex-start、center、flex-end */
自适应大屏 flex百分比布局-2倍屏
最新发布
qq_38260470的博客
03-29 124
【代码】自适应大屏。
移动Web开发--flex布局
weixin_45038005的博客
08-26 406
传统布局和flex布局
移动web布局----flex布局详解
清风的博客
08-15 344
flex布局 1.flex布局 1.flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 ; 2.当为父元素设为flex布局以后，子元素浮动，清除浮动，vertical-align属性失效 3.通过给父元素添加display:flex;属性，控制盒子的位置和排列顺序 1.1父元素属性 /*设置主轴方向*/ flex-direction:row||row-reverse||column|...
移动web-flex布局
qq_52822043的博客
03-14 384
目录 1. flex布局原理 1)flex 2)flex container 原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 2. flex布局父项常见属性 1)flex-direction 设置主轴的方向 2)justify-content 设置主轴上的子元素排列方式 3)flex-wrap 设置子元素是否换行 4)align-content 设置侧轴上的子元素排列方式（多行） 5)align-item 设置侧轴上的子元素排列方式（单行） 6)flex-fl..
14-移动web开发-flex布局
行如逆水行舟，不进则退
11-28 70
移动web开发-flex布局1. flex布局原理2. 父项常见属性2.1 flex-direction设置主轴的方向2.2 justify-content 设置主轴上的子元素排列方式2.3 flex-wrap设置是否换行2.4 align-items 设置侧轴上的子元素排列方式（单行 ）2.5 align-content 设置侧轴上的子元素的排列方式（多行）2.6 align-content 和align-items区别2.7 flex-flow 属性是 flex-direction 和 flex-w
弹性布局-flex布局.zip
05-18
移动web端之flex布局笔记，包含案例和实战代码
lorry0508#The-front-end-notes#移动web开发_flex布局1
07-25
1.技术选型 2.搭建相关文件夹 3.设置视口标签以及引入初始化样式 4.常用初始化样式 5.模块名字划分
移动web 第四天flex布局、实战演练小兔仙
12-25
移动web flex布局、实战演练小兔仙
移动web 第三天移动端特点、百分比布局、flex布局
12-25
移动web 移动端特点、百分比布局、flex布局
Angular-flex-layout.zip
09-18
使用flexbox和响应式apiangular flex布局,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
前端移动Web第二天：Flex伸缩布局-携程首页案例.zip
04-16
携程首页源代码
移动Web开发布局(流式布局、flex弹性布局、less+rem+媒体查询布局)
06-22
移动Web开发布局(流式布局、flex弹性布局、less+rem+媒体查询布局)学习笔记
移动WEB前端高级开发项目实战_移动网页样式布局_编程案例解析实例详解课程教程.pdf
05-22
随着手机等移动设备的普及,用户的使用场景开始大面积从PC端转移至移动端,Web前端的开发工作也更多地偏向移动端应用。所以,有效地掌握移动端网页样式布局,是成为一名合格前端开发工程序的必要条件。移动端因其较好的...
前端移动Web第二天知识点：Flex伸缩布局.zip
04-16
前端移动Web第二天知识点：Flex伸缩布局知识点的源代码
计算机学习WEB2020，全套
08-22
06 移动web开发 07 javascript基础语法 08 web api编程 09 jquery编程 10 Javascript高级 ES6 11 前后端交互node+gulp 12 前后端交互 MongoDB+express 13项目实战 博客项目 14 前后端交互 ajax 15 前后端交互Git ...
bootstrap5中，d-flex布局 justify-content-center 中怎么纵向居中放置两个card
04-19
要想在 Bootstrap 5 中使用 d-flex 布局的 justify-content-center 类将两个 card 纵向居中放置，可以将它们放在一个父容器里面，然后给这个父容器设置居中样式，比如： ```html <div class="d-flex justify-content-center align-items-center vh-100"> <div class="card mx-2"> <!-- card 内容 --> </div> <div class="card mx-2"> <!-- card 内容 --> </div> </div> ``` 这里使用了 vh-100 类使父容器铺满整个视口，然后给它添加了 d-flex 和 justify-content-center 类使内部的 card 纵向居中。另外还添加了 align-items-center 类来让卡片水平对齐。然后在父容器内分别放置两个卡片即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值