css常用技巧

自从移动手机的广泛使用前端的需求量逐渐增多，那么移动端h5,css3成为必会技巧，面试中面试官会经常询问到适配和实现一个什么动画的效果。

一.响应式开发

<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">复制代码

一般我们会在页面的代码中设置这样的属性，viewport是指屏幕上能够用来显示网页的区域，默认情况下是980像素。为什么能在移动端切换自动铺满屏幕，功劳在于meta标签。

meta标签的属性如下：

• width:设置viewport的宽度，为正整数，或者字符串“device-width”
• initial-scale:缩放值
• minimum-scale:最小缩放值
• maximum-scale:最大缩放值
• height:viewport高度

1.flex是常用的布局技巧，包含多种属性：

flex-direction    决定主轴方向

flex-wrap       默认在主轴方向，项目排在轴线上，如果超出一行该属性定义如何换行， 包括nowrap wrap

justify-content   定义项目在主轴上的对齐方式               center.space-between.space-around

aline-items   定义项目在交叉轴的对齐方式              center是常用属性

2.rem

rem是由跟元素的字号来决定大小。一般会配置一个文件来引入来达到一个适配的效果

（function(){
//获取跟元素对象
var de = document.documentElemnet;
function resetFontseize(){
var w = de.setBoundClientRect().width;//获取浏览器宽度
if(w>640)w=640;
de.style.fontSize =(w/10)+'px'//为跟元素负值

}
resetFontseize（）；

//页面大小改变时候，重新设置元素字号
window.addEventListner('resize',resetFontseize，false)；//页面大小改变时候重新设置很元素的的字号
}）（）复制代码

其实rem布局的本质是等比缩放，一般是基于宽度来进行缩放，使用到javascript来动态改变html标签font-size的大小，其他的rem单位的数值就会被浏览动态计算转为px单位，从而达到和设计图高度的相似。 750：100=获取到的屏幕大小：html标签的px单位的值

设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 100px，设计稿宽度：600px

移动设备：600px，那么 1rem = 100px。

转载于:https://juejin.im/post/5d05e5a8f265da1bd04edef5