用截图工具（截图工具测得的像素等于物理像素）测得CSS中的1px 的等于物理像素1px的 那么他们的比值就是1：1
例：html中字体尺寸为 20px，盒子宽度为 5rem，则最后显示的盒子宽度为 100px。
JavaScript 语言 的 " 比较运算符 “ , 又称为 ” 关系运算符 " ,
这里说明一下，无论dpr多大，1px的大小通常来说是一致的，这也就意味着，随着dpr的增大，物理像素点会越来越小，这样才能容纳更多的物理像素，才能更高清，更retina
很久没有做过移动端的项目了，关于移动端的自适应，最早之前用rem，我个人觉得效果很不错。忘记是哪个大神的文章提到过，lib-flexible有一些问题，建议使用viewport，今天使用一下viewport。
最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏😃各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念~在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口1.1 布局视口图片在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，用户可以手动对网
在 JavaScript 中 , Boolean 布尔类型 是 基本 数据类型之一 ,
将 数据 转为 数字类型 有 如下 四种方法 , 使用 parseInt() 和 parseFloat() 函数 是 最常用的两种方法 , 需要重点掌握 ;
Math.abs() 方法文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/abs
优化关键渲染路径（Critical Rendering Path）是指优先显示与当前用户操作有关的内容。
String 字符串对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为750 px，则共有个750 物理像素，则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素
文档对象模型或“DOM”是网页的接口。 它本质上是页面的API，允许程序读取和操作页面的内容，结构和样式。
在做移动端适配的时候，很多人第一反应就是使用 rem ，通过动态设置 html 上的 font-size 来进行页面的自适应，基本原理就是 rem 表示的是 root em ，页面中所有的值都是基于html上的 font-size ，相对的进行对应的变化
HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport（视口） 参考答案 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> width=device-width 是设置视口宽度为设备的宽度，还可以固定视口的宽度，例如： width
响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；
上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、 PPI、 DPI、 DP、 DIP、 DPR、视口等等，你真的能分清这些概念的意义吗？
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。
https://juejin.cn/post/6951575591099301895
这几天领导找我，说我们的H5页面内置了很多链接，这些链接的打开的速度有点慢，你有什么办法可以优化一下么？或者有什么好的方案可以拿出来聊聊，我心想，这提升速度的方案无非就那么几种，我要是优化不好，就目前这就业形势，怕是要把我优化了
很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生
在 HTML 文档中，我们可以根据视口的条件显示、隐藏或重新排列页面的某些部分。例如，如果浏览器窗口的宽度为 480 像素，我们可能会将导航从水平导航移动到垂直可折叠列表。将 SVG 与媒体查询一起使用时，我们可以做类似的事情。
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
本文主要介绍了垂直居中显示的常见解决方案，包括使用Flexbox、基于视口的布局以及基于表格布局的方法。这些方法都可以在不同程度上实现垂直居中显示，并且具有较好的兼容性和扩展性。同时，作者还介绍了一些细节和注意事项，以帮助读者更好地理解和应用这些方法。
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
「进程 :」 进程是操作系统资源分配的基本单位，进程中包含线程。简而言之，就是正在进行中的应用程序。
ansi编码批量转换器是款转换器支持多种文字编码格式的软件。可以将txt编码转换成自己手机所支持的编码方式，方便于你手机看小说，让你轻松转换，小说快速观看！
那么在移动端为什么是 980 而不是其他的值呢，因为过去网页的版心都是 980，乔老爷子为了能够让网页在移动端完美的展示, 所以将 iOS 手机视口的大小定义为了 980，后来谷歌也觉得这是一个非常牛 X 的方案, 所以 Android 手机的视口也定义为了 980。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
在 网页端 使用 HTML 表单 和 浏览器输入框 prompt 函数 , 接收的数据 是 字符串类型 变量 ,
vw与vh不能混用。因为vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
viewport是移动端跨屏适配的基石，吃透这一概念，任何复杂多变的适配需求，都可以手到擒来。
CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。
@media screen and (max-device-width:400px){
在网络世界，你肯定记得住网站的名称，但是很难记住网站的 IP 地址，因而也需要一个地址簿，就是 DNS 服务器。DNS 服务器是高可用、高并发和分布式的，它是树状结构，如图：
例如：<meta name="viewport" content="width=device-width, initial-scale=1.0"> , 该标签的作用是告诉浏览器，
相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163455.html原文链接：https://javaforall.cn
注意： 如果电脑显示的缩放为125%，那么给媒体特性设置宽度时只设置手机型号的宽度不起作用。（因为电脑显示的手机宽度是 ：125%×真实手机宽度）
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
这篇文章介绍了几个非常实用的开源项目，它们可以帮助用户将网页转换为图像或 PDF 文件，并提供了丰富而灵活的配置选项来满足不同需求。无论您是需要生成网页快照还是抓取数据时获取相关信息，这些工具都能派上用场。它们基于先进的底层技术（如 Puppeteer 和 Chrome Headless），操作简单方便，并且在多个平台上均有良好兼容性。如果您对此类工具感兴趣，请务必查看一下这篇文章！
网络用户对网站加载时间和性能有很高的期望。加载缓慢的网站可能会增加跳出率并让用户感到不满意。为了应对这一挑战，开发人员不断寻求不同的技术来提高速度和整体用户体验，其中一种方法就是“懒加载”。为了实现懒加载，开发人员使用JavaScript。通过使用JavaScript，Web开发人员可以控制特定元素从服务器获取和渲染到用户屏幕的时间和方式。本文将探讨懒加载的好处、实施方法、对Web性能的影响、挑战和最佳实践。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
