移动web基础知识点总结

移动web

pc web品优购

制作favicon图标

png 图片转换为 ico 图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

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, .7);

        }
        .son {
            width: 50%;
            height: 20px;
            background-color: green;
            background-size: 40px 20px;
            background-image: linear-gradient(45deg,  transparent 33%,rgba(255, 255, 255, .2) 33%, rgba(255, 255, 255, .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;
}
}

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,402评论 6赞 499
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,377评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,483评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,165评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,176评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,146评论 1赞 297
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,032评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,896评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,311评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,536评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,696评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,413评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,008评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,659评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,815评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,698评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,592评论 2赞 353