移动端布局

一、学习使我快乐

笔记来自拉勾教育大前端，说真的，对于培训机构我起初报有的信心不是很大，包括以前也报过，但是都因为各种原因半途而费了，偶然的机会接触到拉勾教育，从开始的期待一直到现在第一模块结束，才感觉自己是真的学到了东西。既然可以通过努力去改变自己，那有什么不努力的原因呢，加油吧，打工人！

• 打好基础真的很重要，html、css、javascript三大件，必须完全掌握，不懂就直接查MDN
• HTML重点掌握语义化。区块分级和内联标签，了解定义在head里面的meta
• css重点看盒模型。定位。层级。过渡，动画和transform。知道原理和规则
• 熟练应用以上所学的知识点，搭建自己想要的页面，包括一些重点和难点,less和flex之类的也要熟练掌握。

二、移动端开发基础

移动端调试方法

• 搭建本地web服务器，手机和服务器一个局域网，通过手机访问服务器
• 使用外网服务器，直接ip或域名访问
• 移动端浏览器我们主要对webkit内核进行兼容

视口

• 就是浏览器显示页面的屏幕区域，视口可以分为布局视口、视觉视口和理想视口

布局视口

• 默认设置，pc上网页可以在手机上呈现，但是会缩小元素，默认手动缩放网页

视觉视口

• 用户正在看到网站的区域，通过缩放去操作视觉视口，但不影响布局

理想视口（推荐）

• 为了使网站有理想的浏览和阅读宽度而设定的，简单理解布局的视口等于设备的宽度

width: 宽度设置的是viewport，可以设置device-width特殊值
initial-scale: 初始缩放比，大于0的数字
maximum-scale: 最大缩放比，大于0的数字
minimum-scale：最小缩放比，大于0的数字
user-scalable：用户是否可以缩放

物理像素&物理像素比

• 物理像素指屏幕显示的最小颗粒
• 一个px能显示的物理像素点的个数，称为物理像素比或者屏幕像素比

特殊样式

css3盒子模型
box-sizing:border-box;
-webkit-box-sizing:border-box;
/* 点击高亮我们需要清除样式 */
*{
  -webkit-tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观在ios加上这个属性才能给按钮和输入框自定义样式 */
input{
  -webit-appearance: none;
}
/* 禁用长按页面时弹出菜单 */
img,a{
  -webit-touch-callout:none;
}

移动端技术选型

1. 单独制作移动端页面（主流）

• 流式布局（百分比布局）
• flex 弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局

2. 响应式页面兼容移动端

• 媒体查询
• bootstrap

3. 国内的手机浏览器都是根据webkit修改过来的内裤，国内尚无自主研发的内核，就像手机操作系统都是基于Android修改开发一样的

移动端技术解决方案

• 浏览器以webkit内核为主，私有前缀添加-webkit-
• css初始化normalize.css。优点：保护了有价值的默认值，修复了浏览器bug，模块化和拥有详细的文档

流式布局也称百分比布局

• 百分比布局，通过将盒子设置成百分比，根据屏幕宽度来进行伸缩，不受固定像素限制
• 移动web开发中比较常见的布局方式
• 设置视口标签以及引入初始化样式

常用初始化样式

body {
  margin: 0 auto;
  min-width: 320px;
  max-width: 540px;
  background: #fff;
  font-size: 14px;
  font-family: -apple-system, Helvetica, sans-serif;
  line-height: 1.5;
  color: #666;
}

css渐变效果

background-image: linear-gradient(0deg,#f1503b,#c82519 50%);

图片格式DPG

• 京东自主研发的图片压缩技术，提高用户打开网页速度，能够兼容jpeg，并且清晰度没有差距

响应式布局容器

• 需要一个父级做为布局容器，实现变化效果
• 在不同屏幕下，通过媒体查询改变布局容器大小，改变页面布局和样式变化

  .box{
      height: 100px;
      margin: 0 auto;
    }
    /* 超小屏幕 */
    @media screen and (max-width: 767px){
      .box{
        width: 100%;
        background-color: blue;
      }
    }
    /* 小屏幕 */
    @media screen and (min-width: 768px){
      .box{
        width: 750px;
        background-color: blueviolet;
      }
    }
    /* 中等屏幕 */
    @media screen and (min-width: 992px){
      .box{
        width: 970px;
        background-color:chartreuse;
      }
    }
    /* 小屏幕 */
    @media screen and (min-width: 1200px){
      .box{
        width: 1170px;
        background-color:crimson;
      }
    }
  

移动端规范布局

• 先引入理想视口和css样式表
• 引入规范css样式表normalize.css

• 格式化css样式

/* 初始化样式 */
body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
ul,li {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  color: #222;
  text-decoration: none;
}
h1,h2,h3,h4,h5,h5 {
  margin: 0;
  padding: 0;
}
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{
  -webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input{
  -webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

flex布局

• flex弹性布局，用来为盒状模型提供最大灵活性，任何一个容器都可以指定为flex布局
• 当我们为父盒子设置flex布局后，子元素的float、clear和vertical-align属性将失效
• 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

flex-direction 设置主轴方向

• 主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，而子元素就是跟主轴排列的

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

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

• 定义了主轴上对齐方式，但是要先确定主轴

属性值	说明
flex-start	默认从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

flex-wrap 设置子元素是否换行

• flex布局中默认不换行的

属性值	说明
nowrap	默认值，不换行
wrap	换行

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

• 控制子项在侧轴上排列方式，在子项为单行的时候使用

属性值	说明
flex-start	默认从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸

align-content 侧轴上子元素排列方式(多行)

• 设置子项在侧轴上排列方式，只能用于子项换行的情况，在单行下是没有效果的

属性值	说明
flex-start	在侧轴头部开始排列
flex-end	在侧轴尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布两头，再平分剩余空间
stretch	设置子元素高度平分父元素高度

flex-flow

• flex-flow是flex-direction和flex-wrap属性的复合属性
• flex-flow: row norwrap;

flex 布局子项常见属性

• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序

flex属性

• flex属性定义子项目分配父盒子的剩余空间，用flex来表示占有多少份
• 属性值为数字，数字为1，表示占总份数中的1份，默认为0

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

• align-self属性允许单个项目有不同的对齐方式，可覆盖align-items
• 默认值为auto，表示继承父元素的align-items属性，如果没有父元素等同于stretch

order排序

• 数值越小，排列越靠前，默认为

rem布局

• rem是一个相对单位，类似em,em是父元素字体大小
• 不同的是rem基准是相对于html元素字体大小
• 父元素文字大小可能不一致，但是整个页面只有一个可以很好的控制整个页面的元素大小比例

媒体查询

• 使用@media查询，可以争对不同媒体类型定义不同样式
• @media会根据不同高度和宽度重新渲染页面

  @media mediatype and|not|onle (media feature) {
 CSS-Code 
}

mediatype

• all:用于所有设备
  -print:用于打印机和打印预览
  -screen:用于电脑屏幕，平板电脑，智能手机

关键字

• and:将多个媒体连接到一起，相当于且的意思
• not:排除某个媒体类型，相当于非的意思
• or:可以测试多个媒体查询条件，只有一个成立就执行
• only：指定某个特点的媒体类型

媒体查询+rem实现元素动态大小变化

• rem 单位是跟着html走的可以根据不同设备宽度来修改样式
• 媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

Less

• Less是一门css预处理语言，拓展了css的动态特性

Less安装

• 用node.js安装Less
• cmd命令"npm install -g -less"安装，检查安装成功lessc -v

Less编译

• 我们需要把less文件编译成css文件，这样我们html才能使用
• 推荐方法node.js: 在当前文件夹，使用cmd命令"lessc style.less > style.css"
• 利用vscode less插件，easy LESS插件用来把less文件编译成css文件

简介高效的rem适配方案flexible.js

• github地址：https://github.com/amfe/lib-flexible
• 在index.html中引入flexible.js这个文件

vscode px 转换rem插件 :cssrem