1、calc()函数

用于动态计算长度值，值灵活
css3新增功能
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
运算符前后都需要保留一个空格
语法： calc(表达式)

运算符前后都需要保留一个空格
width: calc(100% - 200px);  减号的前后添加空格

.box {width: calc(100% - (10px + 20px) * 2);height: 300px;background-color: pink;
}

浏览器支持在IE9+、Firefox、chrome、safari可以正常呈现

利用calc()实现三栏自适应布局

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}
.box {height: 500px;background-color: pink;}
.box p {float: left;}
/* 左右两栏 */.box p:nth-child(1),.box p:nth-child(3) {width: 200px;height: 480px;background-color: red;}
/* 中间 */.box p:nth-child(2) {height: 480px;background-color: green;/* calc运算 */width: calc(100% - 400px);}</style>
</head>

<body><div class="box"><p>左边</p><p>中间</p><p>右边</p></div>
</body>

</html>

2、css3过渡动画——transition属性

语法

transition: transition-proterty transition-duration transition-timing-function transition-delay;
transition: css样式  动画的执行时间  速度类型  动画的延迟时间;多个css属性用逗号隔开transition: transform 2s, background-color 2s;

注意：谁发生了属性的改变 就加在谁身上

属性

1、transition-proterty
- css样式：参与过渡的css属性名称|all表示所有属性
2、transition-duration
- 动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms
3、transition-timing-function
- 速度类型
  
  1.linear 相同的速度从开始到结束，也就是匀速 2.ease 默认值慢速度开始--速度变快--慢速度结束 3.ease-in 慢速度开始的过渡效果，也就是以低速度开始 4.ease-out 慢速度结束的过渡效果，也就是以低速结束 5.ease-in-out 以慢速度开始和结束的过渡效果
4、transition-delay
- 延迟时间：默认0s,单位s|ms

注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}
.warp {width: 400px;height: 400px;background-color: pink;}
.box {width: 200px;height: 200px;background-color: tomato;/* 参与过渡的css属性名称 */transition-property: width, height, background-color;/* 动画执行时间 */transition-duration: 2s;/* 速度类型 */transition-timing-function: linear;/* 延迟时间 */transition-delay: 2s;
/* 复合写法 */transition: width 2s 2s, height 2s 2s, background-color 2s 2s;
/* transition: all 1s linear 2s; */
transition: 2s linear 2s;
}
.warp:hover .box {width: 300px;height: 300px;background-color: blue;}</style>
</head>

<body><div class="warp"><div class="box"></div></div>
</body>

</html>

移动端项目

1、移动端浏览器及内核

移动端浏览器：百度浏览器，火狐浏览器，谷歌浏览器，uc浏览器，360浏览器，qq浏览器，苹果浏览器，猎豹浏览器，搜狗浏览器，2345浏览器等等

国内用户首选使用移动浏览器的占比中：uc浏览器，qq浏览器，360浏览器，为用户手机浏览器平台首先前三位

内核：

对于安卓手机而言，使用率最高的就是webkit内核，国内目前尚无自主研发的内核，都是基于开源内核webkit上进行的二次开发，并不是完全的自主内核

对于苹果手机而言：由于系统封闭，不允许除苹果系统自带的浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均在Safari内核的基础上进行开发；

终端分为三个：pc iPad 移动端

现状

手机端的屏幕尺寸各不相同

视口大小不同

我们开发的网页，在不同的手机上，若想展示效果一致，必然不是为每一种型号手机都开发一套页面，而是一套代码要尽可能的能适配所有（部分极少数用户的机型在产品经理不纠结的时候也是可以舍弃的）的机型

2、viewport

1、什么是视口？

视口简单来说就是浏览器显示页面内容的区域。
视口：浏览器显示内容的屏幕区域，相当于PC端浏览器可视区 (白板区域)
在PC端，正常的视口宽度就是整个浏览器的窗口可视区的宽度，会随着浏览器窗口大小的重置而缩放；

2、视觉视口

视觉视口是指用户当前看到区域，即设备宽度

视觉视口是用户正在看到的网页的区域，即屏幕宽度。

3、布局视口

移动端设备默认的viewport，css布局写的大小，一般是980px（不写viewpoint代码演示）

移动设备的浏览器都默认设置了一个viewport元标签，定义了一个虚拟的布局视口，布局视口使视口与移动端浏览器屏幕宽度完全独立开。CSS 布局将会根据它来进行计算，并被它约束。

大部分移动设备默认的 viewport 为 980px,不同设备上的浏览器的默认的宽度并不一样。

所以PC上的网页基本能在手机上呈现，只不过看上去很小，一般默认允许用户通过手动缩放、平移来查看网页。

布局视口的宽度/高度可以通过 document.documentElement.clientWidth / Height来获取

如果要显式设置布局视口，可以使用 HTML 中的 meta 标签

<meta name="viewport">

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">把这行标签去掉<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Document</title><style>* {margin: 0;padding: 0;}
.box {height: 200px;background-color: pink;}</style>
</head>

<body>
<div class="box"></div>
</body>

</html>

4、理想视口

布局视口对用户不友好，基于理想视口设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，网站的所有内容都可以正常的呈现给用户。

为了网站的移动端能有更好的浏览器和阅读而设置（苹果公司引入的理想视口的概念）

理想视口可以使用 HTML 中的 meta 标签显式设置布局视口等于设备宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">
创建一个虚拟窗口，窗口宽度为设备宽，初始缩放比为1倍，同时不允许用户手动缩放
content属性：- width 虚拟窗口的屏幕宽度 device-width 设备宽- initial-scale 页面初始缩放比- user-scalable 是否允许用户手动缩放- user-scalable=no 不允许用户手动缩放- user-scalable=yes 允许用户手动缩放，默认值- maximum-scale 最大缩放比- minimum-scale 最小缩放比height : 设置viewport的高度（我们一般而言并不能用到 ）

常见的手机设置的大小iphone4/5/SE 320iphone6/7/8 375iphone6plus、 iphone7plus、 iphone8plus 414

3、移动端布局方案

1、流式布局（宽度自适应）

流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定，因此在大屏幕手机下显示的效果会变成页面元素的宽度被拉长，高度和原来保持一致

优点：

可以很好的来解决自适应的问题

缺点：

1、实际显示的效果不友好,屏幕越大，宽度被拉的很长，容易变形

2、大量使用百分比布局，会出现兼容性问题

    <style>* {margin: 0;padding: 0;}
.box {width: 50%;height: 100px;background-color: pink;}
img {width: 50%;height: 100px;}</style>
</head>

<body><div class="box"></div><img src="./images/Koala.jpg" alt="">
</body>

2、rem布局

rem是css3新增单位，它是相对于根元素的字号大小的单位

rem原理：

rem是指相对于根元素的字体大小的单位，即根据html元素的font-size来计算大小。

在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。

比如说 html 的 font-size 大小为 100px, 一个 div 的 width 为 1rem，则 div 的 width大小为100px

相对单位 : rem

html {font-size:100px; //1rem = 100px
}

.box {width:2rem;// 2*100 = 200pxheight:3rem;//3*100 = 300pxfont-size:1rem;//1*100 = 100px
}

rem布局的实现：

1、设置页面的viewport

2.动态计算并设置不同尺寸html的font-size属性

3.按照PC端布局方式正常布局，将px单位改为rem单位（较小的长度比如1px的边框就不需要转换成rem,直接设置px）

// 1. 获取当前屏幕的宽度
// 2. 获取当前屏幕下html元素的字体大小;
// 3. 赋值
当前屏幕宽度字体基础值html = 当前屏幕宽度*预设字体基础值/psd设计稿的宽度;320:当前屏幕宽度，设备宽度  deviceWidth640：psd稿  desw100：预设字体基础值1rem=100px?: 当前屏幕宽度字体的基础值（html的font-size的值）currFontSize
320     ？——  =  ——640     100
？=(320*100)/640
currFontSize=(deviceWidth*100)/desw
// 封装一个函数，这个函数的名字叫autofunction auto() {// 获取当前屏幕的宽度var deviceWidth = document.documentElement.clientWidth;
// 打印当前屏幕的宽度console.log(deviceWidth);
//psd设计稿的宽度 假如设计稿就是750pxvar desw = 750;//手机屏幕 大于 设置稿  ,就按1:1的大小去做 // 如果不加这行代码，页面会无限大if (deviceWidth > desw) {deviceWidth = desw;}
// 获取当前屏幕宽度字体的基础值var currFontSize = (deviceWidth * 100) / desw
// 打印当前屏幕宽度html的font-sizeconsole.log(currFontSize);
// 赋值 （给html设置font-size的值）document.documentElement.style.fontSize = currFontSize + 'px';// 表示获取 htmlconsole.log(document.documentElement);}// 调用函数auto();
//只要屏幕改变就调用auto函数 window.onresize = function () {auto();}

优点：

1.适用于偏APP类型的移动端页面

2.有利于手机端各种机型的适配

3.减少代码的重复性

缺点：

1.必须通过js来动态控制根元素的大小

 在 Visual Studio Code 装一个插件: px to rem
文件--首选项--设置--搜索 px to rem --16改成100
转换px--rem或rem--px  捷键：alt +z（选中要换算的代码）

3、vw布局

使用纯css实现动态改变font-size属性值，不需要引用js文件

vw viewport's width 是css3规范中宽度视口单位，将视口宽度平均分成100份
vh viewport's height 将视口高度平均分成100份
原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px

100vw = 750px 1vw = 7.5px;

100vw = 375px 1vw = 3.75px

1px =0.1333333333333333vw
优点：页面元素随着页面宽度变化
缺点：
- 兼容性没有rem好 ,得大量计算，不是很精确
- 转换后的长度单位不够直观修改维护困难

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}
.box {width: 1vw;height: 1vw;background-color: green;}
.box1 {/* width: 100px; */width: 13.33vw;/* 100*0.1333=5.332 */height: 13.33vw;/* height: 100px; */background-color: pink;}</style>
</head>

<body>a<div class="box"></div><div class="box1"></div><!-- /* 在移动端调试，点击responsive,调到750px */ -->
</body>

</html>

在 Visual Studio Code 装一个插件: px to vw

转换px--vw或vw--px 捷键：alt +z（选中要换算的代码）

注意：会给px-rem有冲突

4、vw + rem布局

确定基准值以常见的750px设计稿为例（宽度），根据vw单位和rem单位原理实现

在750px设计搞下，如果使用vw单位换算，可以理解成100vw = 750px，1px = 0.13333333vw；如果使用rem单位换算，预设1rem = 100px; 则100px = 13.333333vw html{ font-size: 13.333333vw; }

弊端：不是很精确

750px   100vw   1vw = 7.5px;

375px   100vw    1vw = 3.75px

以设计稿为准:

假设还是750px设计稿  750px=100vw    1px=0.1333vw;

预设字体基础值 100px   1rem = 100px  = 13.33vw;


html {font-size:13.33vw;
}
.box1 {width: 0.4rem;height: 0.8rem;background: pink;}
/*width:40px;height: 80px;  */

4、移动端项目的rem.js

function auto() {// 获取当前屏幕的宽度var deviceWidth = document.documentElement.clientWidth;
//psd设计稿的宽度 假如设计稿就是375pxvar desw = 375;
// 获取当前屏幕宽度字体的基础值var currFontSize = (deviceWidth * 100) / desw
// 当手机屏幕大于750px,当前的html的font-size按照200px计算
if (deviceWidth > 750) {document.documentElement.style.fontSize = '200px'} else {document.documentElement.style.fontSize = currFontSize + 'px';}
}
// 调用函数
auto();

//只要屏幕改变就调用auto函数
window.onresize = function () {auto();
}

学Web的第二十一天相关推荐

从零学web前端_从零到前端英雄（第2部分）
从零学web前端 This article is part two of the "From Zero to Front-end Hero" series. In part one ...
哪些人适合学web前端培训呢
哪些人适合学web前端培训呢?经常会有人问到这个问题,因为互联网对于很多人来说是非常具有诱惑力的,前端便是其中的一种互联网技术,那么针对这个问题,我们来看看下面的详细介绍吧. 哪些人适合学web前端培 ...
学web前端需要了解哪些常识
想要学好web前端技术,那么一定要掌握足够的知识,web前端技术包含很多方面的知识,具体学web前端需要了解哪些常识?来看看下面的详细介绍. 学web前端需要了解哪些常识? html + css ja ...
网上搜集了点资料，学web的人互相分享共同进步吧（php编码的好习惯必须养成）...
网上搜集了点资料,学web的人互相分享共同进步吧一.优秀的代码应该是什么样的? 优秀的PHP代码应该是结构化的.大段的代码应该被分割整理成一个个函数或方法,而那些不起眼的小段代码则应该加上注释,以便 ...
html语言难不难学,Web前端开发难学吗?
Web前端开发难学吗? 更新时间:2019年02月22日16时54分来源:传智播客web前端培训浏览次数: 关于Web前端开发难学吗?学Web前端都需要学习哪些内容?很多想要转行学习Web的同学还 ...
从零开始学 Web 之 BOM（四）client系列
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:ht ...
【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... +-------------------------------------------------------- ...
Web服务初探：用Demo学Web服务系列（7）——XML的相关知识
我们前面的<Web服务初探:用Demo学Web服务系列>六个随笔中已经探讨完了C/S程序对Web Services的调用,大家感觉难吗?下面我们就有关的Web Services的原理讲解一 ...

学Web的第二十一天