布局视口

在PC端，布局视口就是浏览器窗口

视口的宽度 = 浏览器窗口的宽度

通过以下JavaScript代码获取布局视口的宽度和高度：

document.documentElement.clientWidth
document.documentElement.clientHeight

视觉视口

理想视口

<meta name="viewport" content="width=device-width" />

上面代码中的 width 指的是布局视口的宽，device-width 实际上就是理想视口的宽度。

width=device-width这段代码是让布局视口的尺寸等于理想视口。

设备像素比

设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)

移动端的 psd 原稿的尺寸是按照设备像素设计的

CSS 中的样式是基于布局视口的尺寸计算的

设备像素 = 设计图尺寸＝ 750px

布局适口＝理想视口＝浏览器手机模式里面的手机尺寸 = 375px

移动端开发单位使用问题
前言 PC 端页面开发与移动端页面开发： PC 端页面开发需要考虑更多的兼容性问题，ie、谷歌、火狐等浏览器各自内...
一篇真正教会你开发移动端页面的文章(一)
一个移动端的时代从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代...
移动端页面开发
如何在手机上调试 1，手机和电脑处于同一个 wifi2，在电脑上启动一个 http server npm i -g...
移动端页面开发
布局视口在PC端，布局视口就是浏览器窗口视口的宽度 = 浏览器窗口的宽度通过以下JavaScript代码获取...
移动端页面开发
视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，如果是为了显示整个为了为PC端设计的网页，那...
16日总结
WEB前端开发工程师 PC端(电脑) -页面移动端(手机) -页面 ---- 用户体验问题需要：...
移动web开发调试工具eruda（适合app混合开发）
一、介绍：相信一开始开发移动端web页面的小伙伴会有一个问题，移动端页面在移动设备上真机调试或者是app混合开发...
移动web开发调试工具vorlon（适合app混合开发）
一、介绍：相信一开始开发移动端web页面的小伙伴会有一个问题，移动端页面在移动设备上真机调试或者是app混合开发...
在上海乐字节学习Java前端-总结
web前端学习知识点总结：基础：HTML+CSS网站页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发...
站在巨人肩膀上孜孜不倦的造轮子
用来记录前辈们的技术文档和心得移动端浅谈前端移动端页面开发（布局篇）一步一步构建手机WebApp开发移动端重构系...