day 15

知识回顾

1、弹性盒子

• 设置弹性盒子 display:flex | inline-flex

• 容器属性：

  • 更改主轴方向 flex-direction：row | column
  • 主轴上的对齐方式 justify-content: center | space-between | space-around
  • 交叉轴上的对齐方式 align-items： center
  • 主轴上如何换行 flex-wrap:wrap;

• 项目属性：

  • 调整某个项目的顺序 order:正值 | 负值 | 0（默认）
  • 定义项目的放大比例 flex-grow: 分配的分数
  • 定义项目的缩小比例 flex-shrink:0（设置这条属性的项目不会缩小）
  • 项目对齐方式 align-self

2、calc()

• 动态计算长度值
• 运算符前后需要加空格

一、less

1、less编译

考拉

2、less语法

（1）注释

//这种注释只显示在less文件中，不会编译到css中去
/*这个注释可以编译到css中去*/

（2）导入

@import "文件路径"

（3）变量

@变量名:变量的值;
@w:300px;
width:@w;

@{变量名} 引用是如果变量是镶嵌在字符串中需要这样使用

（4）混合

.box {
    width:300px;
    height:300px;
    background:red;
}
.box1 {
    .box;
}

（5）嵌套

选择器嵌套

选择器嵌套中如果需要用自己，则使用&

.wrap {
    width: 1000px;
    margin: 0 auto;
    .left {
        float: left;
        a{
            font-size: 12px;
            color: #333;
            &:hover {
                color:yellow;
            }
        }
    }
    .right{
        float: left;
        h3{
            font-size:30px;
        }
        
    }
}

（6）继承

样式的继承通过extend伪类来实现。

混合可以将一个定义好的class A引入到另一个class B中，从而实现class B继承class A中的所有属性。这样编译原理是把代码copy一份过来，编译后的CSS中依然会存留大量的冗余CSS代码，为了避免这一点，我们可以使用extend伪类来实现样式的继承使用。

.box4 {
    width: 500px;
    height: 500px;
    border: 1px solid red;
}
.box5 {
    &:extend(.box4);
}

（7）运算

任何数字、颜色或者变量都可以参与运算；在运算中以()进行优先级计算；例如:calc()函数;

// 运算

@wi:100px;

.box6 {
    width: 600px - @wi;
    // 注意，如果运算前后的单位不一致
    // 以第一个单位为准
    height: 100% - @wi;
}

二、手机浏览器及内核

手机浏览器是运行在手机上的浏览器，目前手机浏览器需要 Java 或智能手机的系统（如苹果的 IOS 系统以及Android 平台等）支持。

手机浏览器种类：
UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，2345浏览器等。

国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，都是基于开源内核Webkit 进行二次开发的。

三、viewport

1、什么是viewport?

指的是移动设备浏览器中放置页面的一个虚拟的窗口即用来显示网页的那一部分区域，相当于PC端浏览器可视区

2、viewport的作用

在移动端开发中，常将视口抽象划分为布局视口、视觉视口和理想视口。
布局视口，移动设备默认的viewport即布局视口，宽度介于768px ~1024px之间，不进行缩放的话，比浏览器窗口要大。
视觉视口：视觉视口是用户正在看到的网页的区域，即屏幕宽度。
理想视口：布局视口对用户不友好，没有考虑到手机尺寸，所以苹果公司引入理想视口概念，那些基于理想视口而设计的网站，不需要用户手动缩放，也不会出现横向滚动条，网站的所有内容都可以正常的呈现给用户。

3、viewport的设置

<meta name="viewport" content="initial-scale=1.0,
width=device-width, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>

• width:设置视口的宽度，可以是具体的像素值，也可以是特定的参数

  <meta name=”viewport” content=”width=device-width”> <!-- 视口宽度为设备屏幕的宽度（设备独立像素）-->   
  

• initial-scale:页面初始的缩放值，为数字，也可以是小数

  <meta name=”viewport” content=”width=device-width, initial-scale=1.0”><!-- 设置初识缩放为1.0，也就是不进行缩放-->
  

• minimum-scale: 允许用户的最小缩放值，为数字，可以是小数。

• maximum-scale: 允许用户的最大缩放值，为数字，可以是小数。

• user-scalable: 是否允许用户进行缩放，’no’为不允许，’yes’为允许。

四、移动端适配方案

1、为什么需要适配？

由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得 web 页面在不同移动设备上具有尽可能统一或合理的展示效果，需要在开发过程中使用合理的适配方案。

2、宽度自适应适配

垂直方向用定值，水平方向用百分比、弹性布局及浮动、定位等布局技巧的综合运用创建可扩展的流式布局，让页面有能力随着屏幕宽度变化，页面也会跟着变化。
优点：可以一定程度上满足自适应的需求
缺点是：更适用于对横向拉伸的设计元素不适用于复杂的活动页，对设计稿有一定要求存在局限性。

3、rem适配

（1）什么是rem?

rem( font size of the root element)是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。
在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放。

（2）rem布局实现步骤

• 设置页面的viewport

• 确立好基准值，常规布局，使用rem单位取代px

• 换算不同设备尺寸下1rem的值，即改变不同尺寸下html 的font-size

  换算中比较常用的是css媒体查询区间查询定制和js动态计算控制。

媒体查询

@media screen and (min-width:500px) and (max-width:1000px) {
    css样式
}

• 样式表中使用媒体查询

<style>
    p {
        column-count: 3;
        background-color: aqua;
    }
    /* 媒体查询判断设备大小 */
    @media screen and (min-width:500px) and (max-width:1000px) {
        p {
            column-count: 2;
            background-color: pink;
        }
    }
    @media screen and (min-width:0px) and (max-width:500px) {
        p {
            column-count: 1;
            background-color: yellow;
        }
    }
</style>

• link

<!-- 媒体查询配合link -->
<link rel="stylesheet" href="./1000.css" media="screen and (min-width:1000px) and (max-width:2000px)">
<link rel="stylesheet" href="./500.css" media="screen and (min-width:500px) and (max-width:1000px)">
<link rel="stylesheet" href="./0.css" media="screen and (min-width:0px) and (max-width:500px)">

（3）rem+媒体查询

优缺点：

• 可以实现适配效果
• 由于设备尺寸繁多需要设置密集的断点
• 适配时不够精准
• 不在查询范围内，会导致无法适配

<p>0817web班</p>

<style>
    html {
        font-size: 100px;
    }
    p {
        width: 10rem;
        height: 5rem;
        font-size: 0.5rem;
        background-color: aqua;
    }
    @media screen and (min-width: 0px) and (max-width:800px) {
        html {
            font-size: 30px;
        }
    }
</style>

（4）rem+js

js动态计算并设置html的font-size值

基准值以 750px 设置 1rem=100px 为例，首先得到将要适配的设备尺寸，与 750 换算比例从而得出不同设备尺寸下 1rem 的大小。

根据上面的 js 代码，如果页面宽度低于 750px, 那么页面中 html 的 font-size 也会按照（当前页面宽度/750）的比例变化。这样，页面中所有应用了 rem 的作尺寸单位的元素都会随着页面变化而等比例缩放，从而达到适配。

 <!-- js插件引入 -->
<script src="js/remScale.js"></script>
<style>
     p {
        width: 10rem;
        height: 5rem;
        font-size: 0.5rem;
        background-color: aqua;
    }
</style>

4、vw适配

（1）什么是vw？

​ vw 即Viewport's width的简写，是css3规范中的视口单位，相对于视口的宽度，视口被均分为100单位的vw。

（2）vw单位布局

​ 确定基准值以常见的750px宽度的设计稿为例，那么根据vw单位的原理100vw = 750px，即1vw = 7.5px，我们可以根据设计图中的px直接转换成对应的vw值进行布局，当然也可以直接写px，借助插件插件自动计算成需要的vw。因为vw是相对于视口宽度的单位，当视口宽度发生变化，则元素大小随即发生变化

750px=100vw

1vw = 7.5px

1px = 0.133333vw

假设1rem = 100px

1rem = 13.3333vw

5、移动端样式重置

（1）禁止用户选中文字，安卓无效 -webkit-user-select: none;
（2）禁止长按弹出系统菜单。 -webkit-touch-callout: none;
（3）去除android下a/button/input标签被点击时产生的边框 & 去除ios下a标签被点击时产生的半透明灰色背景。 -webkit-tap-highlight-color: rgba(0,0,0,0);
（4）切换横竖屏或者用户自己通过浏览器设置的话，可以改变字体的大小(需要给body下的所有元素)。 -webkit-text-size-adjust: 100%;

（5）按钮在ios下都是圆角。
-webkit-appearance: none;
border-radius: 0;

（6）修改placeholder的样式。
input::-webkit-input-placeholder{ color:#000; }
input:focus::-webkit-input-placeholder{color:#f00; }

五、移动端特殊处理

1、超小字体的处理

<style>
    p {
        font-size: 12px;
        /* 小于12号字的处理方案 */
        transform: scale(0.5);
    }
</style>

2、动画定义3D启用硬件加速

element {
      -webkit-transform:translate3d(0,0,0)
      transform: translate3d(0,0,0);
}

3、圆角bug：部分Android手机圆角失效

element{
      background-clip: padding-box;
}

4、Input 的placeholder会出现文本位置偏上的情况

IOS 和 Android 中显示不同。

解决方法是：在保证 input 输入文本垂直居中的条件下，给 placehoder 设 置 padding-top，不要设置行高。

2、设备像素、独立像素和css像素

设备像素
设备像素又称为物理像素，此像素是设备的固有属性任何设备屏幕的物理像素的数量自出场从出厂的那一刻，设备像素已经固定，不会再发生改变。

像素比 DPR
它的本质是指一个 CSS 像素代表几个物理像素。它的意义是为了让图像能够在高清屏上显示。
设备像素比(device pixel ratio)，简称dpr，定义了物理像素和设备独立像素的对应关系，它的值可以按下面的公式计算得到：
设备像素比 = 物理像素 / 设备独立像素。

CSS 像素
又称为设备独立像素、逻辑像素。CSS中使用的一个抽象的概念，单位是 px
注意： 电脑当中的一个设备像素一般是等于一个 CSS 像素。所以我们在 PS 当中的切图大小，一般也代表物理像素表示的大小
在普通屏幕下 1 个 CSS 像素对应 1 个物理像素，而在 Retina 屏幕下，1 个 CSS 像素对应的却是 4 个物理像素。
Retina显示屏
苹果推出了 Retina 屏幕。
所谓“Retina”显示屏又叫做视网膜屏是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

六、flexible.js + rem

lib-flexible的库来自手淘团队，这个库就是用来解决H5页面终端适配的。
使用方法

1. 在Web页面的中添加对应的flexible_css.js,flexible.js文件：
2. 把视觉稿中的px转换成rem
   flexible 的实质
   （1）动态改写 标签。
   （2）给 元素添加 data-dpr 属性，并且动态改写 data-dpr 的值。
   （3）给 元素添加 font-size 属性，并且动态改写 font-size 的值。

七、vscode插件

cssrem

用来转换px单位和rem单位的vscode插件

Easy Less

less文件自动生成css文件的vscode插件

Auto Rename Tag

双标签中, 改变其中一个标签, 另外一个也跟着改变

八、logo优化

1. h1嵌套a标签, 因为h1很重要, 具有唯一性, 使用h1时告诉搜索引擎这个地方很重要.

2. a标签里面放文字, 一般为网站名称, 并设置title, 让a标签中文字不显示:

   做法一: font-size: 0; (京东做法)

   做法二: text-indet: -999px; (淘宝做法) 还要再父类中添加文本溢出 overflow: hidden;