1. Css单位中px、em和rem的区别
px 是像素（Pixel），这个好理解吧？
em 是指当猜迟前元素所使用的字体中大写字母M的宽度。为什么要单独用M的宽度来表示呢？因为英文字体中有些是不等宽的字体，其中i的宽度最小，W的宽度最大，所以用M的宽度来做个代表，不过中文字体都是等宽的，没有这方面的麻烦。我们可以简单地把em理解为字体的大小，比如说当前元素的字体大小（font-size）是16px，那么1em=16px，1.5em=24px，依此类推。
rem与em类似，只不过运羡它是以根元素（html）的字体大小作穗悄李为基本单位的。
em和rem主要用于页面的弹性布局
2. 自媒体查询、flex弹性布局、响应式布局及 rem 布局
自媒体查询、rem布局、响应式布局技术，是告稿三个不同的技术。 自媒体查询 常用在适配不同的设备显示场景下，根据屏幕大小显示不同页面，但功能大致不变的这么一个技术。 rem布局 它是一个长度单位，这个长度单位是根据‘根元素’的字体大小的单位确定的（根元素字体大小 = 1rem）。 响应式布局 它是在页面宽度改变时，整个页面或者页面中的局部随着页面的缩放进行响应并实时变化（ 响应式布局和自媒体查询有区别 ）。在如今复杂的开发中这几个技术越来越密不可分，在项目中可以通过实际需求进行搭配。
功能： 自媒体查询主要是设置不同的设备屏幕下的显示样式。
获取浏览器或设备宽度：
min-device-width （设备的宽度）\ min-width (浏览器的宽度) （注释：也可以获取高度，就是将width改写成height）
方法：
功能： 就是使用flex对页面进行布局，也可以是响应式的。
方法： 一下方法为flex常用方法，具体学习可以点击链接 flex布局
概念： 指相对跟元素的字体大小的单位。（补充：rem于em的区别一个是以根元素字体大小为参考，em是以父级元素为参考）
使用方法：
一般使用媒体查询+rem或js,在不同宽度的窗口下自动调节字体大小。
布局特点： 不同设备对应不同的HTML或者局部自适应。（不同的设备不同的页面）
布局袜升孝特点：确保一个页面在所有终端上，都能显示出令人满意的效果。（一套方案，处处运行。）
设计思路：使用自媒体查询及用 % 或 rem 作为单位，对不同视口设备进行编写样式。
布局特点：为了保证在各种屏幕上得不失真，就要根据实际屏幕宽度做等比换算。（一套方案，是不同尺寸、分辨率的视口呈现出较好的效果。）
设计思路：使用自媒体查询及用 % 或 rem 作为单位，对不同视口设备进行编写样式。
总结：
在项目开发中，根据项目的实际情况选择不同的技术的搭配，这样才能实现业务的效果。笑模
3. 移动端rem自适应布局-最简单易懂的两种方法
em 是个相对单位，等于该元素或父元素的font-size值；
rem: root 1rem等于根元素的font-size值
Vw（宽）、vh： 把屏幕分为100份，1vw等于屏幕的1%
1、给文件根元素设置font-size值（会影响字体，但可以解决）
<script>
//以iphone6为例，尺寸375，此时font-size=100px。便于计算
var fonsiz=document.documentElement.clientWidth/3.75;
document.documentElement.style.fontSize=fonsiz+"px";
</script>
2、给html设置rem布局后，需要给body重新设font-size，不然很难处理正常的尺寸
body {
碧陪巧 font-size: 16px;
}
3、vscode 安装 px to rem 插件，设置其扩展设置的值为100
4、选中需要把px改为rem单位的css样式，alt+z更换为rem布局
1、安装px to rem插件设置100px转换，如上图3，100px=26.667vw=100/3.75，给html标签设置vw
html {
font-size: 26.66667vw;
}
2、选中悔键需要把px改为rem单乱散位的css样式，alt+z更换为rem布局
4. 浅谈rem与rpx布局
rem大家或许都比较熟悉，而rpx则是腾讯在公测小程序时所推崇；二者实质并无太大的区别，在很多的小白前端开发阶段会不懂为什么一些老前端在开发移动端过程中会出现部分地方不使用rem或者rpx而转用px，接下来谈谈我的看法：
一般开发中横向布局通常使用rem/rpx布局，纵向布局部分使用px
（适用于一行布局中多个元素布局）
1. 这里以上图为例，因为每一台手机的屏幕横向的大小是固定的，如果使用px则可能在小屏幕出现位置不可控，导致首贺内容换行错乱等问题。故使用rem/rpx单位布局。
2. 而手机纵向的高度是无限延伸的，所以上下边距和边框等则可以使用px固定像数，这样不会对页面效果产生太大影响，而且也不用担心元素不可控错乱等问题。
（适用于一行中单元素或者左右两端的小型元素布局）
1. 同样一上图为例，对于这样的单元素或者左右颤尺小元素，可以选择px固定尺寸，原因是当横行布局只有一个元素时根本不会产生错乱，因为屏幕的宽度远大于这点小元素的宽度，如果产生错乱则可以放弃该手机适配了（这种小屏幕早该淘汰了）。
2. 纵向布局原理与上面一致。
本文章仅代表个人开发观点，实际情况实际分析，如果还是不懂就记住一句话：发生者洞派错乱就必须使用rem或者rpx布局；围绕此观点就不会有错。如果有错误还望各位大师指出，这也是我第一次写文章，多多指教。
5. 响应式布局-PC端和移动端同时适配
第二种 rem响应式兄哗布局方案(等比缩放)：
使用的时候按照1920的设计稿来做。100px=1rem，font-size设置成100px; 750px的设计稿 1rem = 100px 设置屏幕超过2560及以上，就固定1rem = 200px， 宽度小于600及以下，就固定1rem = 32px
第三方库用的一般是使基困用px单位，无法使用rem适配不同设备的屏幕羡锋行。
解决办法：使用px2rem-loader插件将第三方ui库的px转换成rem单位。
移动端设计稿一般都是750px的，所切的图就是@2x 的，在一些DPR为3.0的手机上使用@2x图片大多数也会显示的很清晰，这样就是为什么设计稿要750px的
6. 11.CSS布局篇之响应式——rem
rem是什么拦碰？
px，绝对长度单位，最常用
em，相对长度单位，相对于父元素，不常用
rem，雹烂相对长度单位简肆谈，相对于根元素，常用于响应式布局
响应式布局的常用方案
media-query,根据不同屏幕宽度设置根元素font-size
rem,基于根元素的相对单位
rem的弊端：“阶梯性”
7. 黑马程序员pink老师什么级别
高级程序员。黑马程序员pink老师懂得计算机的基本操作，基本了解计算机的基本操作，了解计算机专业的一些基本知识，掌握基本的编程语言，如Java、python或JavaScript属于高级程序员。
8. css样式布局及rem用法梳理
视口（viewport）是答返用来约束网页中最顶级块元素的，即它决定了网页的大小，网页是先在视口上渲染，然后再通过视口放回到浏览器窗口上的，网页的渲染过程如下：
pc端视口的大小和浏览器的大小一样，所以网页是1：1的放到浏览器窗口上，而移动端视口就有点特殊，移动端视口的宽度是比移动端屏幕要宽，宽度尺寸一般是980px或者1024px，网页是视口上渲染完之后，为了能在移动端屏幕上显示整个网页，整个视口会整体缩放到屏幕的宽度，这样，网页看上去就整体缩放
具体如何设置视口以及禁止视口页面缩放可以自行网络
（主要针对移动端以及pc端网页需要实现等比放大缩小页面效果）
大概有以下几种
1、流体布局
流体布局其实就是宽度用百分比，高度用固定值的布局方式，宽度通过百分比来适配不同宽度的屏幕。
为了适配手机端不同尺寸的屏幕，我们在定义元素宽度的时候可以写百分比，百分比是相对于屏幕的宽度，所有宽度就可以做到自适应，而在高度方向，由于网页的高度是不定的，所以我们可以把高度写成固定的值(px),这种布局方式叫做流体布局。
注意两个概念
2、弹性盒模型布局flex
这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式。
3、rem布局
rem是一种相对长度单位，通过这个长度单位可以实现元素宽高等比例缩放，从而完成不同宽度屏幕的适配。
4、响应式布局 （媒体查询）
通过样式动态查询屏幕的宽度，动态切换样式来适配不同宽度屏幕的布局方式。
Bootstrap是最典型的一种
待补充
实际开发中，pc端页面需要实现响应式等比缩放（即自适应），使清族饥用rem+弹性布局是比较现实及理想的解决方式
移动端可以使用rem布局，也可以使用px实现（主要用flex），具体看产品是怎么设计要求的
css3规定：1rem的大小就是根元素<html>的font-size的值。
rem其实是一个单位 ，是个相对单位 root em。rem就是root（根元素的大小）相对于html元素的字体大小的单位。
rem布局的原理
就是根据一个html根元素来控制，网页的布局，实现类似于自适应等比例的缩放的布局。
rem优势
通过修改html文字的大小，来改变页面中元素的大小，实现了页面的整体控制
rem的作用
通过设置 根元素<html>的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等，根据移动设备的宽度大小来实现自适应，不同的设备都展示一致的页面效果。
简单用法
vscode中安装cssrem插件，通过这个插件可以自动穗漏计算rem数值。
具体设置如下
注意:设置后 vscode软件需要重启 否则计算的rem值会出错
待补充
可以通过js的方式来改变，也可以通过css媒体查询的方式来改变，
待补充
9. 在黑马程序员学习了前端，web前端的工作有哪些主要内容
web前端要精通html +css ，js，这是最基本的。像网站，美工 ，制作，这些都要过关 。 还要熟悉一些后台语言 （后台的不一定要会写，看得懂就好）、SEO。要制作一个网站的前端页面，涉及到代码优化， 规范，交互效果，兼容问题(ie6-11;ff;chrome;oprea;[响应式布局])。不过也不容担心看上去多，只要真正静下心来做，也会逐一击破，黑马程序员的口碑一直很好，可以学到真本事，相信题主以后的发展也会越来越好的。