蟹黄堡

响应式开发原理响应式开发就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。响应式开发原理：在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。设备划分尺寸区间超小屏幕（手机）<768px小屏设备（平板）>=768px ~ <992px中等屏幕（桌面显示器）>=992px ~ <1200px宽屏设备大桌面显示器）&g

rem单位rem是一个相对单位，类似于em，但和em是有区别的。em是相对与父元素的字体大小来说的。rem是相对于html元素的字体大小来说的。优点：rem可以通过修改html里面的文字大小来整体控制页面中元素的字体大小。媒体查询@media可以针对不同的屏幕尺寸设置不同的样式，当重置浏览器大小时，页面也会根据浏览器的宽度和高度重新渲染页面。媒体查询的语法格式如下：@media not|only mediatype and (media feature) { CSS 代码..

流式布局流式布局也称为百分比布局。流式布局就是通过设置盒子的宽度为百分比，让它能够根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。通常，为了保护盒子的宽度在合理范围之内，我们都会设置以下两个属性：max-width：最大宽度min-width：最小宽度微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！...

物理像素&物理像素比物理像素点（分辨率）是指屏幕显示的最小颗粒，是物理真实存在的。在PC端页面，1px等于1个物理像素；但在移动端，1px不一定等于1个物理像素。物理像素比（屏幕像素比）是指1px能显示的物理像素点的个数。比如：iPhone8手机的物理像素比就是2，它表示1px开发像素 = 2个物理像素。多倍图原因：一张100px * 100px的图片，如果在手机上打开，该图片会按照相应的物理像素比放大倍数，进而会使图片失真。为了解决这个图片失真的问题，通常我们会使用

视口视口就是浏览器显示页面内容的屏幕区域。视口的分类：布局视口、视觉视口、理想视口。布局视口(layout viewport)一般移动设备的浏览器都默认设置了一个布局视口，并且该视口最常见的分辨率为980px。由于980px的宽度大于大部分手机屏幕的宽度，为了将页面显示完全，只能对原来的页面进行缩放，如果不进行缩放，那么就需要左右拖动来浏览。（大部分浏览器默认采用缩放方式）视觉视口(visual viewport)视觉视口是指用户正在看到的网页的区域。用户可以通过缩放来查看网站

flex布局概述flex用来为盒状模型提供最大的灵活性，并且任何一个容器都可以指定flex布局。指定了flex布局的元素，不管是行内元素还是块级元素，都可以设置宽度和高度。flex布局就是通过给父盒子添加flex属性来控制子盒子的位置和排列方式。为父盒子设定flex布局以后，子元素的float、clear和vertical-align属性都将失效。采用flex布局的元素，称为flex容器，简称“容器”；而它的所有子元素自动成为容器成员，成为flex项目，简称“项目”。flex布局父元素常见的