页面布局

常见的css布局单位

单位 描述
px 像素px是页面布局的基础，一个像素表示电脑或手机屏幕上能显示的最小区域，限速分为CSS像素和物理像素。CSS像素是为web开发者提供的，在CSS中使用的一个抽象单位。物理像素与设备的硬件密度有关，任何设备的物理像素都是固定的。在有的设备中CSS设置1px可能会显得很粗，这就是因为，CSS中的1px并不能和设备上的1px划等号，它们中间有一个比例，就是物理像素/CSS像素
% 百分比，就是直接相对于父元素来说的
em、rem em和rem相对于px更加的灵活，它们都是相对单位，区别是em是相对于父元素，rem相对于根元素。em相对于父元素的字体大小的倍数。rem相对于根元素的字体大小的放大倍数。
vw、vh vw、vh和百分比很像。区别是百分比大部分相对于祖先元素，也有相对自身的情况，例如border-radius、translate等，而vw、vh是相对于视窗的尺寸。

px、em、rem的区别及使用场景

两栏布局的实现代码、展示

三栏布局的实现代码、展示

水平垂直居中的实现代码、展示

如何根据设计稿进行移动端适配？

  1. 适配不同像素密度针对不同的像素密度，通过css的媒体查询选择不同精度的图片，以保证图片不会失真。

  2. 适配不同屏幕大小我们应该使用rem,em,vw,vh等相对单位让页面的尺寸自适应。因为如果使用px，可能会导致在不同屏幕上的失真。

对Flex布局的理解及其使用场景

响应式设计的概念及基本原理代码、展示

响应式网站设计就是一个网站兼容多个平台，而不是pc一个版本，移动端一个版本。响应式设计是通过媒体查询(@media)检测不同设备的屏幕尺寸来做处理。关于兼容：页面头部必须有mate声明的viewport