![[红脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_63.c32f5b5.png)
#挑战每日一条沸点#
Day09 web @1x 和 web @2x 有什么区别
Web @1x 和 Web @2x 是指在网页开发中用于适配不同设备像素密度的两种设计规范。它们主要用于支持不同分辨率的屏幕，以确保网页在不同设备上显示清晰和高清。
1. Web @1x：
- 对应标准的设备像素密度，即每个CSS像素对应一个物理像素点。
- 例如，在一台设备像素密度为1的屏幕上，一个CSS像素对应一个物理像素点，这是标准的分辨率。
- 在设计阶段，开发人员通常会以Web @1x为基准来设计网页元素。
2. Web @2x：
- 对应高密度设备像素密度，即每个CSS像素对应四个物理像素点（2x2的像素点矩阵）。
- 例如，在一台设备像素密度为2的屏幕上，一个CSS像素对应四个物理像素点，这就是高密度屏幕。
- 为了在高密度屏幕上显示清晰的图像和文本，开发人员需要提供Web @2x的图像资源和样式。
在实际开发中，为了适配不同设备，开发人员通常会使用CSS的媒体查询来根据设备像素密度选择不同的图像资源和样式。这样可以确保在不同设备上都能获得最佳的显示效果。
Day09 web @1x 和 web @2x 有什么区别
Web @1x 和 Web @2x 是指在网页开发中用于适配不同设备像素密度的两种设计规范。它们主要用于支持不同分辨率的屏幕，以确保网页在不同设备上显示清晰和高清。
1. Web @1x：
- 对应标准的设备像素密度，即每个CSS像素对应一个物理像素点。
- 例如，在一台设备像素密度为1的屏幕上，一个CSS像素对应一个物理像素点，这是标准的分辨率。
- 在设计阶段，开发人员通常会以Web @1x为基准来设计网页元素。
2. Web @2x：
- 对应高密度设备像素密度，即每个CSS像素对应四个物理像素点（2x2的像素点矩阵）。
- 例如，在一台设备像素密度为2的屏幕上，一个CSS像素对应四个物理像素点，这就是高密度屏幕。
- 为了在高密度屏幕上显示清晰的图像和文本，开发人员需要提供Web @2x的图像资源和样式。
在实际开发中，为了适配不同设备，开发人员通常会使用CSS的媒体查询来根据设备像素密度选择不同的图像资源和样式。这样可以确保在不同设备上都能获得最佳的显示效果。
展开
评论
点赞
![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)