# 一、calc()函数
- 用于动态计算长度值，值灵活- css3新增功能- 任何长度值都可以使用calc()函数进行计算；- calc()函数支持 "+", "-", "*", "/" 运算；- calc()函数使用标准的数学运算优先级规则；- 运算符前后都需要保留一个空格- 语法： calc(表达式)```html运算符前后都需要保留一个空格width: calc(100% - 200px); 减号的前后添加空格.box { width: calc(100% - (10px + 20px) * 2); height: 300px; background-color: pink;}```
- 浏览器支持 在IE9+、Firefox、chrome、safari可以正常呈现- 利用calc()实现三栏自适应布局
```html <!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>
```# 二、css3过渡动画——transition属性- 语法```csstransition: 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，不会产生过渡效果
```html<!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 标签```html<meta name="viewport">``````html<!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 标签显式设置布局视口等于设备宽度```html<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 320 iphone6/7/8 375 iphone6plus、 iphone7plus、 iphone8plus 414```属性说明:| width | 正整数或device-width | 定义视口的宽度，单位为像素 || ------------- | --------------------- | --------------------------------------------------- || height | 正整数或device-height | 定义视口的高度，单位为像素，一般不用 || initial-scale | [0.0-10.0] | 定义初始缩放比率 || minimum-scale | [0.0-10.0] | 定义最小缩放比例，它必须小于或等于maximum-scale设置 || maximum-scale | [0.0-10.0] | 定义最大缩放比例，它必须大于或等于minimum-scale设置 || user-scalable | yes （1）/ no（0） | 定义是否允许用户手动缩放页面，默认值 yes |## 3、移动端布局方案
### 1、流式布局（宽度自适应）流式布局是宽度使用百分比代替固定宽度px，高度大多使用px来固定，因此在大屏幕手机下显示的效果会变成页面元素的宽度被拉长，高度和原来保持一致优点：可以很好的来解决自适应的问题缺点：1、实际显示的效果不友好,屏幕越大，宽度被拉的很长，容易变形2、大量使用百分比布局，会出现兼容性问题```html <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 ```csshtml { font-size:100px; //1rem = 100px }.box { width:2rem;// 2*100 = 200px height:3rem;//3*100 = 300px font-size:1rem;//1*100 = 100px}```* rem布局的实现： 1、设置页面的viewport 2.动态计算并设置不同尺寸html的font-size属性 3.按照PC端布局方式正常布局，将px单位改为rem单位（较小 的长度比如1px的边框就不需要转换成rem,直接设置px）```js// 1. 获取当前屏幕的宽度// 2. 获取当前屏幕下html元素的字体大小;// 3. 赋值 当前屏幕宽度字体基础值html = 当前屏幕宽度*预设字体基础值/psd设计稿的宽度; 320:当前屏幕宽度，设备宽度 deviceWidth 640：psd稿 desw 100：预设字体基础值1rem=100px ?: 当前屏幕宽度字体的基础值（html的font-size的值）currFontSize 320 ？ —— = —— 640 100 ？=(320*100)/640 currFontSize=(deviceWidth*100)/desw // 封装一个函数，这个函数的名字叫auto function auto() { // 获取当前屏幕的宽度 var deviceWidth = document.documentElement.clientWidth; // 打印当前屏幕的宽度 console.log(deviceWidth); //psd设计稿的宽度 假如设计稿就是750px var desw = 750; //手机屏幕 大于 设置稿 ,就按1:1的大小去做 // 如果不加这行代码，页面会无限大 if (deviceWidth > desw) { deviceWidth = desw; } // 获取当前屏幕宽度字体的基础值 var currFontSize = (deviceWidth * 100) / desw // 打印当前屏幕宽度html的font-size console.log(currFontSize); // 赋值 （给html设置font-size的值） document.documentElement.style.fontSize = currFontSize + 'px'; // 表示获取 html console.log(document.documentElement); } // 调用函数 auto(); //只要屏幕改变就调用auto函数 window.onresize = function () { auto(); } ```* 优点：1.适用于偏APP类型的移动端页面2.有利于手机端各种机型的适配3.减少代码的重复性* 缺点：1.必须通过js来动态控制根元素的大小 ```html 在 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好 ,得大量计算， 不是很精确 * 转换后的长度单位不够直观修改维护困难```html<!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; } 弊端 ： 不是很精确 ```css750px 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```jsfunction auto() { // 获取当前屏幕的宽度 var deviceWidth = document.documentElement.clientWidth; //psd设计稿的宽度 假如设计稿就是375px var 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'; }}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
