# 移动 web

# pc web 品优购

# 制作 favicon 图标

png 图片转换为 ico 图标

http://www.bitbug.net/

# tdk

<head>
  ...
  <title>
    品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
  </title>
  <!-- 网站说明 -->
  <meta
    name="description"
    content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
  />
  <!-- 关键字 -->
  <meta
    name="keywords"
    content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"
  />
  ...
</head>

# 盒子连写属性

border-style: solid; /_ 连写和我们内外边距连写顺序是一样的写 2 个第 1 个代表上下边框的粗细，第 2 个代表左右边框的粗细 _/ border-width: 50px 80px; border-color: red green yellow blue;

# 移动端私有前缀

内核	前缀	主要浏览器
Trident	-ms-	Internet Explorer
Gecko	-moz-	Firefox
Webkit	`-webkit-`	Chrome、Opera、Safari、Android
Presto	-o-	早期 Opera

# 视口:手机网页的大小

name：要设置的属性，viewport 表示视口
content：要设置的内容
width=device-width：设置视口宽度与设备宽度一致
initial-scale=1.0：设置视口初始化缩放为 1（不缩放）
user-scalable=no：设置视口不允许用户缩放（绝大多数手机网页都是不能缩放的）
其他属性介绍
- maximum-scale=5.0：设置视口最大缩放比例为 5，如果禁止缩放该属性设置无效
- m-scale=0.5：设置视口最小缩放比例为 0.5
小技巧: 在 vscode 中设置视口快捷键meta:vp + tab键

# 移动端布局注意点

1.水平方向不能出现滚动条

        a. 禁止用户缩放

        b. 元素宽度不能超过视口宽度

2.只适配宽度（使用百分比单位），高度使用固定 px

        \* 百分比布局（流式布局）：水平方向使用百分比单位，高度使用固定px

3.盒子宽度不能受到 padding 和 margin 影响（避免出现滚动条）

        \* 解决方案：设置内减盒子 box-sizing: border-box;

# 流式布局圣杯布局

a.父盒子 father，宽度为 100%，铺满屏幕，且 box-sizing 为 box-border b.设置父盒子的左右 padding 为 60px c.中间 center 子盒子宽度为 100% d.左右两边盒子通过绝对定位来实现

# 移动端初始化

a.移动端需要设置所有的元素为内减模型(避免 padding 和 border 导致出现滚动条)
b.移动端字体大小一般为 12px
- pc 端默认是 16px
c.移动端默认 a 标签点击背景有蓝色高亮，需要取消 -webkit-tap-highlight-color: transparent;

单标签不能添加伪元素

连写里面不写的值,取默认值

# 背景

# 背景渐变

/* 方位名词 背景渐变属于背景图片的一种特殊情况*/ /* background-image:
linear-gradient(to right, red, green, blue); */

/* 角度的写法 */
/* background-image: linear-gradient(45deg, red, green); */
/* background-image: linear-gradient(135deg, red, green); */

# 五彩条的做法

.line { width: 1000px; height: 5px; /* border: 1px solid #000; */ background:
linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%,
yellow 60%, yellow 80%, pink 80% ); }

# 三种方法使用一个 div 写出三个色块

# 边框

.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-left: 100px solid red;
  border-right: 100px solid green;
}

# 浮动加伪元素

.box2 {
  width: 300px;
  height: 100px;
  background-color: blue;
  margin-top: 100px;
}
.box2::before {
  content: "";
  float: left;
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2::after {
  content: "";
  float: right;
  width: 100px;
  height: 100px;
  background-color: green;
}

# 渐变

.box3 {
  width: 300px;
  height: 100px;
  background-image: linear-gradient(
    to right,
    red 33.3333%,
    blue 33.3333%,
    blue 66.6666%,
    green 66.6666%
  );
  margin-top: 100px;
}

# 渐变进度条

<div class="father">
  <div class="son"></div>
</div>

.father {
  overflow: hidden;
  width: 1000px;
  height: 20px;
  background-color: #eee;
  margin: 100px auto;
  border-radius: 6px;
  box-shadow: inset 0 2px 2px 0 rgba(200, 200, 200, 0.7);
}
.son {
  width: 50%;
  height: 20px;
  background-color: green;
  background-size: 40px 20px;
  background-image: linear-gradient(
    45deg,
    transparent 33%,
    rgba(255, 255, 255, 0.2) 33%,
    rgba(255, 255, 255, 0.2) 66%,
    transparent 66%
  );
}

# 控制背景图片大小

background-size: 50% 20%;

/_ 控制背景图片大小 cover 背景图片等比例缩放，铺满盒子，图片有可能显示不完整 contain 背景图片等比例缩放，图片显示完整，有可能铺不满盒子只写一个数值，代表是宽，高等比例缩放，高默认值是 auto 写 2 个值，第 1 个代表宽，第 2 个代表高写百分比参考是盒子的宽高只写一个百分比的值，参考是盒子的宽(不是图片的宽) 写 2 个值，第 1 个是宽，第 2 个是高，参考的是盒子的宽高 _/

# 弹性盒子

display:flex;

# 主轴

# 控制主轴的方向

flex-direction: column; row 默认值水平方向自左而右 row-reverse 水平反向自右向左 column 主轴垂直方向自上而下 column-reverse 主轴垂直反向自下而上

# 控制子元素在主轴上的对齐方式主轴默认水平方向(自左向右)

justify-content: space-around; flex-start 默认值主轴开始的位置对齐左对齐 flex-end 主轴结束的位置对齐右对齐 center 主轴居中对齐水平居中对齐 space-between 两端对齐中间等距 space-around 中间等距，两边是中间的一半

# 控制主轴换行

flex-wrap: wrap; 子元素的宽度相加超过了父元素的宽度，默认不会换行，在一行上显示，不会溢出，按比例分配子元素的宽度 nowrap 不换行 wrap 换行

# 次轴侧轴

# 控制子元素单行(个)侧轴(垂直)对齐

align-items: center; 弹性盒子可以更好的控制父元素里边的子元素主轴默认水平方向侧轴默认垂直方向

stretch 默认值拉伸子元素不设置高度或者设置为 auto，子元素拉伸成父元素高度一样 flex-start 侧轴开始的位置对齐，顶对齐 flex-end 侧轴结束的位置对齐底对齐 center 侧轴居中对齐垂直居中

# 多行侧轴(垂直)对齐

stretch 拉伸子元素不设置高度，或者高度为 auto 的时候，拉伸成父元素几分之一 flex-start 侧轴开始的位置对齐顶对齐 flex-end 侧轴结束的位置对齐底对齐 center 侧轴居中对齐垂直居中 space-between 两端对齐，中间等距 space-around 中间等距，两边是中间的一半

# 子元素属性

子元素有固定宽度 1flex 宽度=(父元素宽度-固定宽度)/子元素总 flex

# align-self 控制单个子元素垂直对齐

auto 会跟着 align-items 的值 stretch 拉伸 flex-start 侧轴开始的位置对齐 flex-end 侧轴结束的位置对齐 center 侧轴居中

# order 值越小，排序越靠前

默认值:order: 2;

# flex-flow

是 flex-direction 和 flex-wrap 属性的复合属性用于设置或检索弹性盒模型对象的子元素排列方式

# 注意

1.弹性盒子控制子元素布局，只对亲儿子有效 2.弹性盒子的子元素照样可以作为弹性盒子使用 3.弹性盒子不脱标，如果父元素不设置高度，里边的子元素会把高度撑开 4.父元素弹性盒子，里边的子元素不用考虑显示模式，都可以以设置宽高

# opacity 控制透明度取值范围 0-1

# 媒体查询

值描述 all 用于所有多媒体类型设备 print 用于打印机 screen 用于电脑屏幕，平板，智能手机等。

# 条件

@media(min-width: 769px) and (max-width: 992px) { body { background-color: blue; } }

# 从小往大写

body {
  background-color: red;
}
@media (min-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (min-width: 992px) {
  body {
    background-color: green;
  }
}

# 从大往小写

body {
  background-color: red;
}

@media (max-width: 1200px) {
  body {
    background-color: green;
  }
}

@media (max-width: 992px) {
  body {
    background-color: blue;
  }
}

媒体查询引入资源针对不同的屏幕尺寸调用不同的 css 文件

 <link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
    <link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

# less 基础

# 定义变量

@变量名: 值;

# 嵌套

1.less 嵌套子元素的样式直接写到父元素里面就好了 2.如果有伪类交集选择器伪元素选择器我们内层要加&

a {
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

# 添加运算符

添加运算符的左右两侧必须敲一个空格隔开两个数参与运算如果只有一个数有单位则最后的结果以这个单位为准两个数参与运算如果两个数都有单位而且不一样的单位则以第一个单位为准

# rem

em 相对于自身的字体大小来说的如果本身没有参考父元素的
rem 相对于 html 元素字体大小来说的
rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中的元素的大小可以整体控制

# rem 适配方案

1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备
2.使用媒体查询根据不同设备按比例设置 html 的字体大小然后页面元素使用 rem 做尺寸单位,当 html 字体大小变化元素尺寸也会发生变化从而达到等比缩放的适配
1.最后的公式:页面元素的 rem 值=页面元素值(px)/(屏幕宽度/划分的份数) 2.屏幕宽度/划分的份数就是 html font-size 的大小 3.或者; 页面元素的 rem 值=页面元素值(px)/html font-size 字体大小

# rem 适配方案 2

flexible.js 加 rem

把设备分为 10 份

# 响应式布局

一套布局适配多个屏幕

# bootstrap

boostrap 的核心技术（实现响应式布局的核心技术）
- 将屏幕以表格的形式划分为不同的区域(行 row+列 column)，在不同的屏幕下显示不同的区域
记住 bootstrap 中几个经典的尺寸类名后缀
lg: 大尺寸，对应大屏 pc ,在栅格系统响应式布局中对应的屏幕是 >= 1200px
md：中尺寸，对应大屏平板 ipadPro 和小屏 pc,在栅格系统响应式布局中对应的屏幕是 [992,1200)
sm:小尺寸，对应平板 ipad,在栅格系统响应式布局中对应的屏幕是 [768,992)
xs:超小尺寸,对应手机移动端，在栅格系统响应式布局中对应的屏幕是<= 768

bootstrap 中有两种版心容器可供使用者选择

container：响应式版心容器
- 默认样式：
  - 没有高度、边框、颜色
  - 左右 15px 的 padding
- 宽度是响应式
  - 屏幕宽度 < 768 宽度 100%
  - 768 <= 屏幕宽度 < 992 宽度 750
  - 992 <= 屏幕宽度 < 1200 宽度 970
  - 1200 <= 屏幕宽度 < 1200 宽度 1170
container-fluid：流式版心容器
- 默认样式：
  - 没有高度、边框、颜色
  - 左右 15px 的 padding
  - 宽度 100%

default:默认纯白色 link:链接 a 标签默认颜色 success: 淡绿色(成功/确定) info:天蓝色(信息) warning:橘橙色(提示/警告 danger:酒红色(失败/错误) primary`:青色(重要)

栅格的组成部分：

a.版心容器container（相当于 html 页面的 container 版心，相当于 table 表格）
- b.row(相当于 html 页面的父盒子模型,相当于 table 中的 tr)
  - c.col(相当于 html 页面的子盒子模型，相当于 table 中的 tr)

在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于 768 时将栅格隐藏 2、.hidden-sm 在屏幕大于等于 768 小于 992 时将栅格隐藏 3、.hidden-md 在屏幕大于等于 992 小于 1200 时将栅格隐藏 4、.hidden-lg 在屏幕大于等于 1200 时将栅格隐藏

# 移动端布局总结

主流方案 1.单独制作移动端页面京东商场手机版淘宝触屏版苏宁易购手机版 2.响应式页面兼容移动端(其次) 三星手机官网移动端技术选型

流式布局(百分比布局)
flex 弹性布局(推荐)
rem 适配布局(推荐)
响应式布局
选择一种主要技术选型其他技术作为辅助这种混合技术开发

# 2D 转换

# transform

转换变形

# 移动 translate

/_ x 是 x 轴移动位置 y 是 y 轴移动位置中间用逗号分隔 _/ transform: translate(x,y); transform: translateX(100px); 代表 X 轴移动 100px transform: translateY(100px); 代表 Y 轴移动 100px 不会影响到其他元素的位置 translate 中的百分比单位是相对于自身元素的 translate(50%,50%) 对行内标签没有效果

# 旋转 rotate

transform: rotate(度数); 单位是 deg 角度为正时,顺时针负时逆时针默认旋转的中心点是元素的中心点
transform-origin: x y; /_ 注意后面的参数哦 x,y 用空格隔开 x y 默认转换的中心点是元素的中心点(50%,50%) 还可以给 x y 设置像素或者方位名词(top bottom left center) _/
加个过渡实现转圈效果 transition 过渡写到本身上谁做过渡给谁加

# 缩放 scale

transform: scale(x,y); /_ 注意其中的 x 和 y 用逗号分隔 transform: scale(1,1);宽和高都放大一倍,相对于没有放大 transform: scale(2,2); 宽和高都放大了 2 倍 transform: scale(2); 只有一个参数,第二个参数哦和第一个参数一样,相当于 scale(2,2) transform: scale(0.5,0.5);缩小 scale 缩放最大的优势可以设置转换中心点缩放默认以中心点缩放的而且不影响其他盒子 _/

# 综合写法

注意: 同时使用多个转换,其格式为:transform:translate() rotate() scale();等其顺序会影响转换的效果(先旋转会改变坐标轴的方向) 当我们同时有位移和其他属性的时候记得要将位移放到最前可以实现边位移边旋转

# 3D 转换

近大远小
- x 轴水平向右注意: x 右边是正值,左边是负值 y 轴:垂直向下注意:y 下面是正值上面是负值 z 轴: 垂直屏幕注意: 往外面是正值往里面是负值
transform:translate3d(200px,200px,200px); 连写属性 x 轴 y 轴 z 轴
3d 位移 translate3d(x,y,z)
- x y 不能省略如果没有就写 0 一般用 px 为单位
- translatez(120deg); 越大我们看到的物体越大
3d 旋转: rotate3d(x,y,z)
- xy 适用左手法则拇指指向轴的正方向 z 轴正值顺时针
- transform:rotatez(45deg) 沿着 z 轴正方向旋转 45deg
透视:perspective
- perspective:800px; 视距是屏幕距眼睛的距离一般情况下 600-1000px 加在父元素上
3d 呈现 transfrom-style
- 控制子元素是否开启三维立体环境 flat 子元素不开启 3d 立体空间默认的 preserve-3d 子元素开启立体空间 代码写给父级,但是影响的是子盒子

# 动画

动画是 css3 中具有颠覆性的特性之一可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果相比较过渡动画可以实现更多的变化更多的控制连续自动播放等效果使用: 先定义动画再使用(调用)动画

# 动画序列

0%是动画的开始 100%是动画的完成这样的规则就是动画的序列
在@keyframes 中规定某项 css 样式就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果您可以改变任意多的样式任意多的次数
请用百分比来规定变化的发生的时间或用关键词 from 和 to 等同于 0%和 100%

 定义动画
@keyframes 动画名称 {
            0% {
                width: 100px;
            }

            100% {
                width: 200px;
            }
        }
可以做多个状态的变化keyframe关键帧
里面的百分比要是整数
里面的百分比就是总的时间的划分

调用动画: animation-name:动画名称持续时间: animation-duration:持续时间 animation-timing-function:速度曲线默认 ease 匀速 linear animation-delay:动画开始时间默认 0 animation-iteration-count 播放次数默认 1 还有循环播放 infinite animation-direction 规定动画是否在下一周期逆向播放默认 normal alternate 逆播放 animation-play-state 规定动画是否正在运行或暂停默认是 running 运行还有 paused 停止简写属性里不包含 animation-play-state 经常和鼠标经过等配合使用 animation-fill-mode 规定结束后的状态保持 forwards 回到起始状态 backwards animation-timing-function:规定动画的速度曲线默认是 ease 动画以低速开始然后加快在结束前变慢 ease-in 以低速开始 ease-out 以低速结束 ease-in-out 以低速开始和结束 steps() 指定了时间函数中的间隔数量(步长)

动画属性连写动画名称和时间为必写项其他的不写取默认时间动画名称持续时间运动时间何时开始播放次数是否反方向动画启始或者结束的方法 animation: name duration timing-function delay iteration-count direction fill-mode; 我们元素可以添加多个动画,用逗号隔开例如 animation:bear 1s steps(8) infinite,move 1s forward;

# 过渡

那些属性需要过渡: transition-property:background;
过渡时间: transition-duration:1s;
匀速 transition-timing-function:linear;
过渡延迟: transition-delay:1s;
过渡属性连写的时候过渡时间为必写属性其他不写的属性取默认值
- transition:border-radius 1s, margin-left 1s;

# 制作头部和底部悬浮

# 第一种方法弹性盒子

.con {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .header {
    height: 46rem / 37.5;
    width: 100%;
  }
  .center {
    flex: 1;
    overflow-y: auto;
  }
  .footer {
    height: 50rem / 37.5;
    width: 100%;
  }
}

# 第二种方法固定定位

.con {
  .header {
    position: fixed;
    width: 100%;
    height: 46rem / 37.5;
    top: 0;
    max-width: 750px;
    // left: 0;
    background-color: #fff;
  }
  .center {
    padding: 46rem / 37.5 0 50rem / 37.5;
    height: 100%;
  }
  .footer {
    position: fixed;
    bottom: 0;
    // left: 0;
    max-width: 750px;
    height: 50rem / 37.5;
    width: 100%;
    background-color: #fff;
  }
}