width是什么意思(dataexplorer是什么意思)
目录：
1、手机浏览器分辨率
2、移动端和pc端网站需要分开吗
width是什么意思(dataexplorer是什么意思)
3、dpr和多倍图
4、常见移动端适配方式
5、大厂手机浏览器适配方式
前端开发人员需不需要学习移动端适配： 在全球范围内 ， 2020 年所有网站访问的68.1%来自移动设备 ， 比 2019 年的 63.3% 有所增加 。台式机带来了 28.9% 的访问量 ， 而 3.1% 的访问者来自平板电脑 。
2021年全球网站访问来自移动设备势必会突破70% ， 所以网页的移动端适配知识是现在前端开发人员的必修课 。下面我们就移动端适配需要了解哪些知识 ， 一起回顾和讨论一下 。
1、手机的分辨率和手机浏览器的分辨率首先我们得清楚 ， 手机的分辨率和手机浏览器分辨率不是一个东西 。
一般来说 ， 我们使用的手机的分辨率远大于手机浏览器的分辨率 。因为手机分辨率大会让手机显示的内容更细腻 ， 比如消除图片的颗粒感；而手机浏览器分辨率小则是为了让用户对某些内容更好辨认 ， 比如更大的文字 ， 同时 ， 这样的设计也可以让手机浏览器展示一些为pc端设计的网页而不至于由于文字太小无法辨认 ， 或者排版挤成一团看不清楚 。
从下边几张图 ， 可以很清楚的看见手机分辨率和手机浏览器分辨率的大小和倍数关系： （手机浏览器的大小也叫视口大小-viewport）
文章图片
文章图片
文章图片
可以看到现在的旗舰手机的像素比dpr(device pixel ratio)已经达到了3和4 ， 这对我们前端开发人员选择图片的大小提出了新的要求 ， 后边我们会提到多倍图 。
还有就是视口宽度 ， 我们根据查询现有的大部分手机型号 ， 看到目前的手机视口宽度最小是320px ， 最大是428px ， 所以我们一般在媒体查询时 ， 把视口宽度小于540的设备归为手机设备 。
这里提到的视口大小viewport是比较重要的知识点 ， 移动端网站的开发中尤为重要 。我们在这几个地方都会用到它 。
- mate标签中