移动端开发

于 2020-12-03 20:08:18 发布
阅读量262 收藏
点赞数
分类专栏： 笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46212761/article/details/109784518
版权
这篇博客探讨了移动端开发的关键概念，包括视口、二倍图、CSS初始化和常见布局模式。深入讲解了flex布局的原理和属性，如justify-content、align-items等，并介绍了rem适配布局和媒体查询。此外，还提到了响应式布局，特别是Bootstrap框架的应用，以及移动端布局的总结和技术选型。
摘要由CSDN通过智能技术生成

视口

在这里插入图片描述

布局视口 layout viewport

在这里插入图片描述

视觉视口 visual viewport

在这里插入图片描述

理想视口 ideal viewport

在这里插入图片描述

meta视口标签

在这里插入图片描述

二倍图

物理像素&物理像素比

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

背景缩放 background-size

在这里插入图片描述
二倍图做法:
在这里插入图片描述

移动端技术

CSS初始化

在这里插入图片描述

特殊样式

在这里插入图片描述

移动端常见布局

在这里插入图片描述

流式布局

在这里插入图片描述

flex布局

布局原理

在这里插入图片描述

常见父项属性

在这里插入图片描述

justify-content 设置主轴上子元素排列方式

在这里插入图片描述

flex-wrap 设置子元素换行

在这里插入图片描述

align-items 设置侧轴上子元素排列方式（单行）

在这里插入图片描述

align-content 设置侧轴上子元素排列方式（多行）

在这里插入图片描述

align-items和align-content的区别

在这里插入图片描述

flex-flow

在这里插入图片描述

子项常见属性
flex属性

在这里插入图片描述
也可以是百分数

align-self 控制子项自己在侧轴上的排列方式

在这里插入图片描述

order属性定义项目的排列顺序

在这里插入图片描述

rem适配布局

rem基础

rem单位

在这里插入图片描述

媒体查询

概念

在这里插入图片描述

语法

在这里插入图片描述

mediatype 查询类型

在这里插入图片描述

关键字

在这里插入图片描述

引入资源

在这里插入图片描述在这里插入图片描述

Less基础

维护CSS的弊端

在这里插入图片描述

Less介绍

在这里插入图片描述

Less使用

在这里插入图片描述

Less变量

在这里插入图片描述

Less嵌套

在这里插入图片描述
在这里插入图片描述

Less运算

在这里插入图片描述
注意:
在这里插入图片描述

rem实际开发适配方案1

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

响应式布局

响应式布局容器

在这里插入图片描述

Bootstrap前端开发框架
Boostrap简介

在这里插入图片描述

Bootstrap使用

在这里插入图片描述

布局容器

在这里插入图片描述

bootstrap栅格系统

简介:
在这里插入图片描述

在这里插入图片描述

列嵌套

在这里插入图片描述

列偏移

在这里插入图片描述

列排序

在这里插入图片描述

响应式工具

在这里插入图片描述

移动端布局总结

移动端主流方案

在这里插入图片描述

移动端技术选型

在这里插入图片描述

青木·ya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动web开发--Hello world
旅行的风筝
05-23 2498
移动端和PC端在代码书写上有什么区别呢？下面是基础的HTML模板，使用工具自动生成的：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body></body> </html>这段代码，并没有告诉我们移动端开发有什么不同，现在需要加一些东西。<
移动端开发视频
07-22
资源名称：移动端开发视频资源目录：移动端实战系列视频教程移动前端开发视频下载学习视频软件必看 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
基于移动端开发的考勤系统数据库设计_刘佳瑜.caj
12-13
基于移动端开发的考勤系统数据库设计_刘佳瑜.caj
通达OA移动端开发帮助手册_二次开发API
09-02
通达OA移动端开发帮助手册_二次开发API
unity 移动端开发
最新发布
02-29
Unity是一款跨平台的游戏引擎，可以用于开发移动端游戏。它支持iOS和Android等移动平台，并且提供了丰富的功能和工具来简化开发过程。 在Unity中进行移动端开发，你可以使用C#或UnityScript（一种类似于JavaScript的脚本语言）来编写游戏逻辑和交互。Unity提供了一个可视化的编辑器，可以方便地创建场景、添加游戏对象、设置材质和光照等。 Unity还提供了许多移动端开发相关的功能和工具，例如： 1. 多平台支持：Unity可以将游戏项目导出为iOS和Android等多个平台的应用程序。 2. 触摸输入：Unity提供了简单易用的触摸输入接口，可以轻松处理移动设备上的触摸操作。 3. 加速计和陀螺仪：Unity可以访问移动设备的加速计和陀螺仪，用于实现倾斜控制、重力感应等功能。 4. 移动设备特定功能：Unity提供了访问移动设备特定功能的API，例如相机、传感器、位置服务等。 5. 性能优化：Unity提供了一些性能优化工具和技术，帮助开发者在移动设备上获得更好的性能和用户体验。 总之，Unity是一款强大的移动端开发工具，可以帮助开发者快速创建高质量的移动游戏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值