移动端开发选择的方案：

  • 一、 单独移动端页面（主流）
    • 1、 单独移动端页面讲解
    • 2、单独移动端页面有哪几种技术选择
      • 2.1、流式布局(百分比布局)
      • 2.2、flex弹性布局
      • 2.3、less+rem+媒体查询布局
        • 2.3.1 less基础（了解）
        • 2.3.2 媒体查询（掌握）
        • 2.3.3 rem（掌握）
      • 2.4、混合布局
  • 二、 响应式兼容pc移动
    • 1、响应式布局原理
      • 1.1响应式布局--媒体查询
    • 2、bootstrap前端开发框架 （掌握）
      • 2.1 bootstrap介绍
      • 2.2 bootstrap使用
        • 2.2.1布局容器
      • 2.3 bootstrap删格系统
        • 2.3.1删格系统简介
        • 2.3.2删格系统选项参数
        • 2.3.3列嵌套
        • 2.3.4列嵌套 相当于margin-left
        • 2.3.5列排序
        • 2.3.6显示于隐藏

一、 单独移动端页面（主流）

1、 单独移动端页面讲解

单独移动端页面：就是分别为pc、pad、手机单独制作一个页面，网址域名前面加m.可以打开移动端页面，比如：m.taobao.com。

2、单独移动端页面有哪几种技术选择

2.1、流式布局(百分比布局)

流式布局就是百分比布局，宽度给百分比来根据屏幕的宽度来设定的，不受固定像素的影响，就是说给盒子设置百分比的宽度，会根据屏幕的大小来自适应盒子的大小，宽度是相对于父盒子来说的。所以一般为了照顾盒子在一定的范围内，给盒子：max-width、min-width、max-height、min-height，
比如：下面就是一个京东的例子，导航部分就是用流式布局左的 分别给盒子宽度 8%、 10%、 57%、25%，当缩放屏幕的宽度时，会起到一个自适应的效果。

2.2、flex弹性布局

因为之前专门发过一篇flex布局的博客，需要了解的同学就去康康哦，这里就补充一点知识

属性 解释说明
flex-basis：3222px 分配规定的空间 默认值时auto
flex-grow:数字； 把父级剩余的空间分配完
flex-shrink:数字； 压缩比

下面讲解特殊情况：

  • flex-basis ----基础宽度

1、和盒模型的关系：

1.1 和width 属性一样的，前提是 box-sizing: content-size；情况下。
             1.2 如果是在box-sizing:border-size;时 flex-basis设置宽度时，就是由内容决定的 ，而 width是由内容+内边距+边框的，而要减去内边距和边框。

2、和宽度的关系

2.1当width和flex-basis同时书写是作用于flex-basis .因为flex-basis的优先级高于width。
             2.2flex-basis:auto;默认值，子项的尺寸是由自身的尺寸决定的：box-sizing、width\min-width\max-width、content内容的尺寸决定的

  • flex-grow —把父级剩余的空间分配完

级剩余的空间按照特定的尺寸瓜分，里面的数字越大，分配的空间就越多；如果里面是小数：就拿剩余的空间成小数，就是被分配到的空间。

  • flex-shrink 压缩比

当里面元素合起来的宽度超过了父级元素的宽度时，就需要压缩每个盒子的宽度，就给每个盒子添加lflex-shrink，就是按照我们指定的比例压缩。
默认值是1，如果是0 就是不压缩，小数 ：总数小于1
压缩率=每个元素的加权值（flex-shrink 乘以width）/ 加权总和
加权总和：每个元素的宽度*flex-shrink的值的和

  • 当我们只写一个值，就是下面三个值的缩写 grow、shrink、basis
    三个的默认值就是 0、1、auto
.item{flex :2333  3222px;}
/*就相等于 */.item {  flex-grow:2333;flex-shrink:1; flex-basis:3222px; }

flex布局典型的携程网布局
就是设置每个li的份数，

css

/* 海外酒店的布局 */
section {display: flex;height: 270px;border-radius: 8px;  margin: 3px 4px;flex-direction: column;overflow: hidden;
}
/* 既可以作为子项来设置份数，又可以作为父盒子为下面子盒子的布局，转换flex模式*/
section  a {flex: 1;display: flex;margin-bottom: 3px;
}
section  a div {flex: 1;height: 88px;border-right:1px solid #fff;color: #fff;text-align: center;line-height: 42px;
}section  a div:nth-child(3) {border-right: none;
}section  a .hang {display: flex;flex-direction: column;
}section  a .hang span {flex:1;}section  a .hang span:nth-child(1) {border-bottom: 1px solid #fff;
}section  a:nth-child(1) {background:-webkit-linear-gradient(left,#FA5A55, #FA994D);
}
section  a:nth-child(2) {background:-webkit-linear-gradient(left, #4B90ED, #53BCED);
}
section  a:nth-child(3) {background:-webkit-linear-gradient(left, #34C2A9, #6CD559);
}section  a div:nth-child(1) {background: url(../images/hotel.png) no-repeat bottom center; background-size: 121px auto;
}

2.3、less+rem+媒体查询布局

2.3.1 less基础（了解）

1、认识less：
less是css的扩展语言。less中文网：http://lesscss.cn/，
2、先定义后使用：

  • 语法：@变量名:值；
    变量名的规范：区分大小写、不能以数字开头、不包含特殊字符、必须要有@为前缀
  • 书写格式：嵌套
    子元素的样式直接写到父元素里面，
    遇到交集、伪类、伪元素选择器要在前面添加& 比如:hover
    有&，被解析为父元素自身或父元素的伪类

示例

.header {width: 200px;height: 220px;background-color: pink;a {color: red;// 当给伪类或者伪元素的时候前面要加&，不然会被解析成父元素的孩子&:hover {color: purple;}}
}

3、less运算
加减乘除: 左右要用空格隔开、两个数参与运算，只有一个数有单位，最后的结果以第一个数的单位为准。两个数都有单位且单位不一样，则以第一个的单位为准。

4、less与less文件相互间的导入

@import “ comm”; comm 就是另一个comm.less文件

2.3.2 媒体查询（掌握）

1、认识：
css3新语法。
@media可以针对不同的屏幕尺寸设置不同的样式，当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。顺序从小到大代码更加简洁。
比如：

/*表示在我们的屏幕上 并且 最大的宽度是800像素*/ @media screen and (max-width:800px) {html {font-size:50px;background-color:pink;}}

2、语法：

语法 @media 媒体类型 关键字 (media feature) { css-Code ； }

媒体类型：all-用于所有设备 、screen用于电脑平板智能手机、print打印机和打印预览

关键字：and(可以将多个媒体特性连接到一起) || not(排除某个媒体类型) || only(指定特定的媒体类型，可以省略)

媒体特性：width、max-width、min-width 单位px不能少

3、引入资源：
语法：

<link rel="stylesheet"  href="引入css文件" media=”mediatype  and | not | only (media feature )" >

目的就是：针对不同的屏幕设置不同的页面样式

2.3.3 rem（掌握）

1、认识rem：
rem是一个单位，类似于em，但是em是参照父元素的字体大小；而rem 是参照于html的字体大小的，rem就是可以通过修改html的文字大小来改变页面中元素的大小，可以整体控制。

比如：根元素html 设置font-size=12px；非根元素设置width:2rem;则换成px宽就是24px。

2、rem两种适配方案

2.1 rem+媒体查询+less（这种方案知道怎么做就行了，代码繁琐）

1、首先选一套标准尺寸 750为准
2、我们用屏幕尺寸 除以 我们划分的份数 得到了html 里面的文字大小
3、页面元素的rem值=页面元素在750像素的下px值 /html 里面的文字大小

2.2 flexible.js文件+rem

引入方式

 <script src="./js/flexible.js"></script>

当我们引入了js文件后，就不用手动划分屏幕的大小，js会自动根据当前屏幕划分成10等份，vscode里面用使用插件cssrem<这个插件默认的html文字大小 cssroot 16px 可以根据设计稿尺寸要求修改html文字大小，必须要修改插件里的字体大小：设置html字体大小基准值>来将px转换成rem单位，就不用less来计算，

如果我们的设计稿规定屏幕大小为750，就要设置一个范围，即使屏幕超过了750也按照750的设计稿显示，
@media screen and (min-width:750px) {
html {
font-size:75px !important；
}
}
但是因为权重的问题，js会覆盖html ，所以要加一个权重

2.4、混合布局

混合布局就是：看个人，以一种布局方式为主，其他的布局方式为辅，根据页面设计需求。

二、 响应式兼容pc移动

1、响应式布局原理

页面的布局会跟着屏幕的尺寸自适应，不需要不需要为pc端、移动端单独设计页面。
响应式需要一个父级作为一个容器，来配合子级元素实现变化效果。

1.1响应式布局–媒体查询

原理：在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下，看到不同的页面布局和样式变化。

平时我们的响应式尺寸划分
超小屏幕 (手机,小于768px ); 设置宽度为100%。
小屏设备 (平板, 大于等于769px ）; 设置宽度为750px。
中等屏幕 （电脑显示器， 大于等于992px ） ; 设置宽度为970px。
宽度设备 （大桌面显示器 ，大于等于1200px ） ; 设置宽度为1170px。

/* 通过媒体查询来设定容器的宽度大小 */@media screen and (max-width: 767px) {.container {width: 100%;} }@media screen and (min-width: 768px) {.container { width: 750px; } }@media screen and (min-width: 992px) {.container { width: 970px; } } @media screen and (min-width: 1200px) {.container { width: 1170px; }}

2、bootstrap前端开发框架 （掌握）

2.1 bootstrap介绍

bootstrap是目前最受欢迎的前端框架，

  • 推荐官网：http:// bootstrap.css88.com/

优点：

  • 标准化的html+css编码规范
  • 提供了一套简介、直观、强悍的组件
  • 有自己的生态圈，不断的更新迭代
  • 让开发更简单，提高了开发的效率

2.2 bootstrap使用

四步曲：1、创建文件夹结构曲 2、创建html骨架结构 3、引入相关样式结构 4、书写内容


4.书写内容
直接拿bootstrap预先定义好的样式来使用
修改bootstrap原来的样式，注意权重的问题

2.2.1布局容器

1、container 类
不需要媒体查询 ,自动的划分了屏幕尺寸，但是它左右有一个15padding值

  • 响应式布局的容器 固定宽度
  • 大屏（大于等于1200px）宽度定为1170px
  • 中屏（大于等于992px）宽度定位970px
  • 小屏（大于等于768px）宽度定位750px
  • 超小屏（小于768px）宽度定位100%

2、container-fluid 类

  • 流式布局容器 百分百宽度
  • 占据全部视口的容器
  • 适合单独做移动端开发

2.3 bootstrap删格系统

2.3.1删格系统简介

删格系统：它是指页面布局划分为等宽的列，然后通过列数的定义来模块化布局
系统会自动分为最多12列

2.3.2删格系统选项参数


⚠️
如果container里面的内容划分没有达到十二份，容器的宽度就不会满
相反如果超过来12份，就会另起一行布局
当份数之间要有缝隙时 不能添加margin值，盒子会到下一行显示，可以通过里面再嵌套一个小盒子，通过添加padding值，

<div class="container"><div class="row">   <!-- 一共有四个盒子 共12等份 因此每个盒子占3份-->   <div class="col-lg-3">1</div><div class="col-lg-3">2</div>   <div class="col-lg-3">3</div>   <div class="col-lg-3">4</div</div>  <div class="row">   <!-- 一共有四个盒子 共12等份 并且可以设置不同的屏幕尺寸所占的份数-->   <div class="col-lg-6 col-md-4">1</div>   <div class="col-lg-2 col-md-4">2</div>   <div class="col-lg-2 col-md-4">3</div>   <div class="col-lg-2 col-md-4">4</div>  </div>
</div>

2.3.3列嵌套

里面的盒子也是划分12份，是相对父盒子宽度划分的份数
列嵌套最后加一个行row，可以去掉父元素的padding值，高度自动和父元素一样高

2.3.4列嵌套 相当于margin-left

使用 .col-md-offset-偏移的份数，相当于为盒子增加了左边距

2.3.5列排序

通过使用.col-md-push-* 和 .col-md-pull-*类就可以改变列的顺序

2.3.6显示于隐藏

类名 说明
隐藏
.hidden-xs 超小屏隐藏
.hidden-sm 小屏隐藏
.hidden-md 中屏隐藏
.hidden-lg 大屏隐藏
显示
.visible-xs 超小屏显示
.visible-sm 小屏显示
.visible-md 中屏显示
.visible-lg 大屏显示

移动端开发的方式--浅显易懂相关推荐

  1. 前端系列——vue2+高德地图web端开发（poi搜索两种方式）

    前端系列--vue2+高德地图web端开发(poi搜索) 前言 基础 什么是poi搜索 1. 输入提示结合poi搜索 官方代码 步骤 1.进行plugins插件注册 2.data中编写placeSea ...

  2. 一场B站服务端开发面试之旅

    作者 | 蓝 来源 | 我是程序员小贱(ID:Lanj1995Q) 此次B站服务端开发面试之旅可谓惊险,不过通过对大部分面试题套路的掌握,不出意外还是拿下了,下面我们来看看这些题是不是常见的不能再常见 ...

  3. JMessage Android 端开发详解

    JMessage Android 端开发详解 目前越来越多的应用会需要集成即时通讯功能,这里就为大家详细讲一下如何通过集成 JMessage 来为你的 App 增加即时通讯功能. 首先,一个最基础的 ...

  4. java服务端开发 php_PHP使用thrift做服务端开发

    php中文网最新课程 每日17点准时技术干货分享 php使用thrift做服务端开发 thrift采用接口描述语言定义和创建服务,用二进制格式传输数据,体积更小.效率更高,对于高并发.数据量大和多语言 ...

  5. 第13章 Kotlin 集成 SpringBoot 服务端开发（1）

    第13章 Kotlin 集成 SpringBoot 服务端开发 本章介绍Kotlin服务端开发的相关内容.首先,我们简单介绍一下Spring Boot服务端开发框架,快速给出一个 Restful He ...

  6. 移动端开发 rem 单位使用问题

    前言 PC 端页面开发与移动端页面开发: PC 端页面开发需要考虑更多的兼容性问题,ie.谷歌.火狐等浏览器各自内核不同(ie 的天下). 移动端页面开发基本不用考虑这种浏览器间的兼容问题,手机上的浏 ...

  7. 移动端开发高清效果和多屏适配

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  8. php post请求后端拿不到值_[精选] uniapp实现多端开发，与PHP是如何结合的

    文章来自:https://www.jianshu.com/p/b2cb2a2c3313 作者:Neyo_凉 点击加入:PHP自学中心技术交流微信群 商务合作: 请加微信(QQ):2230304070 ...

  9. H5移动端开发学习总结

    对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1.首先,选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667).之前项目中也用到过iphone5的 ...

最新文章

  1. 国家、数据、治理：排列组合文字游戏下的思考（附PPT下载）
  2. 解决python 保存json到文件时 中文显示16进制编码的问题
  3. mysql 语句 求比值_Mysql求百分比
  4. 深入解析PHP中逗号与点号的区别
  5. mybatis实现动态sql语句
  6. 20220209-CTF-MISC-BUUCTF-修改图片宽高--ARCHPR工具的使用
  7. sdut 最少拦截系统
  8. C++之命名空间探究
  9. 牛客网暑期ACM多校训练营(第五场): A. gpa（01分数规划）
  10. centos虚拟机克隆
  11. Game.Physics.Engine.Development(游戏物理引擎开发)
  12. struts1.x 升级到struts2的几点问题
  13. mysql服务器无法启动
  14. 企业管理理论综述与实践 — 绩效
  15. fractional cascading
  16. 到底还有没有月薪3万以下的程序员？程序员工资真的这么高？
  17. Android-节日短信送祝福（功能篇：2-短信历史记录Fragment的编写）
  18. 线性回归中的假设检验
  19. 小程序全局数据,tost弹窗
  20. python版本的Pairs图

热门文章

  1. 神经网络(luogu 1038 答案错误，出题人语体教)
  2. 分布式理论之体系结构
  3. php怎么做单元测试,php单元测试怎么写
  4. delphi2010 开发及调试WebService 实例
  5. RabbitMQ并发处理
  6. 蓝牙耳机怎样才知道充满电
  7. 网管到底要学什么(二)
  8. ctypes.ArgumentError: argument 2: type 'exceptions.TypeError': Don't know how to convert parameter
  9. 正点原子阿波罗F429+STM32CubeMX+LAN8720+LWIP:不带操作系统实现网络热插拔
  10. 热更新技术简易原理及技术推荐