前言 想要在同一设备上运行多个不同的操作系统和应用程序，实现更高效的资源利用吗？...通过本文，您可以轻松掌握在群晖NAS上安装虚拟机的方法，以及使用Virtual Machine Manager进行虚拟机管理和网络设置的技巧。...首先，单击左侧导航栏中的“虚拟机”选项卡，然后单击“创建”。在弹出窗口中，您需要选择虚拟机的类型、名称、描述和操作系统。此外，您还需要指定虚拟机的CPU和内存配置，以及存储位置和大小。...这可能需要一段时间，具体取决于您选择的操作系统的大小和类型。 步骤5：配置虚拟机网络 在安装完成后，您需要配置虚拟机的网络设置，以便它可以与外部网络通信。...当然，由于每个人的需求都不同，所以具体的虚拟机配置和设置可能会有所不同。但是，本文提供的教程和流程应该可以帮助您入门，快速掌握群晖NAS上安装虚拟机的方法。
ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。...而完美视口需要通过viewport meta标签来进行相应的设置。 ###像素### 一个像素就是计算机屏幕能显示一种特定颜色的最小区域。屏幕上的像素越多，同一时间你可以看到的就越多。...设备物理像素 设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。...但当在高密度屏幕上，例如苹果的视网膜屏幕，一个CSS像素跨越了多个设备像素。如果用户缩小到足够的程度，一个CSS像素会变得明显比一个设备像素小。...它的值可以按下面的公式计算得到： 设备像素比 ＝ 设备物理像素 / 设备独立像素 计算公式： 1px = (dpr)^2dp; 获得设备像素比后，便可得知设备像素与CSS像素之间的比例。
通过上面例子我们不难发现 pt 同px是有一个对应（比例）关系的，这个对应（比例）关系是操作系统确定并处理，目的是确保不同PPI屏幕所能显示的图像大小是一致的，通过 window.devicePixelRatio...PC设备设计的网页也能在移动设备上正常显示，移动设备厂商也的确是这样来处理的。...在移动设备上viewport不再受限于浏览器的窗口，而是允许开发人员自由设置viewport的大小，通常浏览 器会设置一个默认大小的 viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸...; document.documentElement.clientHeight; 通过前面介绍我们知道，如果要保证为PC设计的网页在移动设备上布局不发生错乱，移动设备会默认设置一个较大的viewport...是我们布局网页的区域，那么最终layout viewport是要显示在ideal viewport里的，而layout viewport大于ideal viewport时，于是就出现滚动条了，那么为什么有的移动设备网页内容被缩放了呢
； 屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别； 鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。...响应式界面的四个层次 同一页面在不同大小和比例上看起来都应该是舒适的； 同一页面在不同分辨率上看起来都应该是合理; 同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的； 同一页面在不同类型的设备...物理像素，又称为设备像素。显示屏是由一个个物理像素点组成的，1334 x 750 表示手机分别在垂直和水平上所具有的像素点数。...DPR（Device Pixel Ratio） 设备像素比，这个与我们通常说的视网膜屏（多倍屏，Retina屏）有关。 设备像素比描述的是未缩放状态下，物理像素和设备独立像素的初始比例关系。...，获取到的 innerWidth/innerHeight 也会随之发生变化，如果业务逻辑有获取此类高宽进行其他计算的，可能会导致意想不到的错误； 到今天，其实存在很多在 flexible 基础上演化而来的各种
说白了就是同一套代码在不同分辨率的手机上跑时，页面元素间的间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致。 1、一些概念 在解决问题之前，先了解一些概念。...物理像素(px，physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。...所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。...maximum-scale和minimum-scale用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。...当遇到这种情况时，浏览器会取它们两个中较大的那个值。 但为什么要写两个？
/screen/) CSS 像素 / 逻辑像素 位图像素 位图和矢量图 像素之间的关系 像素密度 像素比 / N倍屏 视口 PC 端 移动端 布局视口 视觉视口 理想视口 2-缩放 PC 端 移动端 真机测试流程...计算机可以修改显示分辨率，信号传递给屏幕，屏幕会进行计算，在屏幕上显示。 1080P 的分辨率是1920×1080 2K 屏幕是单一方向分辨率具有约 2000 像素的显示设备。.../ 逻辑像素 CSS 像素是一个抽象的长度单位，单位 px，主要用来精确度量和控制 WEB 网页上的内容。...像素比 / N倍屏 像素比（DPR dpr）： 单一方向上设备物理像素和设备独立像素的比例。 像素比的作用 程序可以根据像素比来显示不同的图片，达到清晰显示网页的效果。...浏览器默认行为 这里指的浏览器默认行为主要有两个 滑动露白 页面缩放 为什么要阻止这些默认行为 这样可以让网页在不同的浏览器都有一样的表现。
window.devicePixelRatio是设备上物理像素和设备独立像素的比例，公式表就是：window.devicePixeRatio = 物理像素/dips。...在移动设备上，初始视口通常就是应用程序可以使用的屏幕部分。 在viewport中就是浏览器上用来显示网页的那部分区域。...表示用户是否可以调整缩放比例 设备像素，设备独立像素，css像素掌握 设备像素就是屏幕上的真实像素点，iphone6的设备像素像素为750*1334，则屏幕上有750*1334个像素点；设备独立像素，操作系统定义的一种长度单位...viewport是浏览器窗口，代表浏览器的可视区域，就是浏览器中用来显示网页的部分区域。 像素单位有设备像素，逻辑像素，css像素。 设备像素也叫物理像素。...什么是设备像素，它指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性。 设备分辨率是用来描述这个显示器的宽和高分别有多少个设备像素。 设备像素和设备分辨率由操作系统来管理。 ?
通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。 # 基础概念 像素是计算机屏幕中显示特定颜色的最小区域。...屏幕中的像素越多，同一范围内能看到的内容就越多。或者说，当设备尺寸相同时，像素越密集，画面就越精细。...# CSS 像素（CSS pixels） 是 CSS 和 JS 中使用的一个抽象概念。它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。...iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?...dip 和设备的物理像素无关，一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 dip。 ?
原文：静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别 静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。...当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。...通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。...，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板...流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。
一个CSS像素对应多少个设备像素是根据当前的缩放比例 12px对应36px，缩放0.5，12px对应18px。扩大2.0,12px对应72px。...3.设备的像素比(device pixel ratio)简称DPR 它的数值体现了物理像素和逻辑像素之间的关系，用公式可以计算出该设备的DPR的大小： DPR = 物理像素 / 逻辑像素 那么了解了上面这些概念...，就可以知道，为什么css在pc上写着font-size=12px;但是换到手机上却变小了？...仍有不足通过vw无法设置最小的网页宽度，网页会随着屏幕的缩小无限缩小 通过Flex Column去自适应高度，rem作为单位自适应宽度。...这样能保证需要满屏的网页在任何设备上都是一样的效果。 2.不占满屏幕的网页 这种条件下一班使用固定的px单位，同时两边留白，随着屏幕变小两侧留白也减少，设置的最小屏幕宽度应该等于网页满屏时的宽度。
在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中，作者讨论了为什么不应该使用像素（px）作为网页字体大小的单位[1]。...在高分辨率屏幕上浏览网页，如果CSS中的 1px 仍然对应于一个字面设备像素，那么甚至阅读任何内容都将非常困难，因为像素本身正在迅速缩小。毕竟，现代智能手机的分辨率甚至比高清电视还要高。...在网页上，默认字体大小为 16px 。一些用户从不更改默认设置，但许多人会更改。但默认情况下， 1em 和 1rem 都将等于 16px 。 “Em” 最初是指 “M” 字符的宽度，这也是名称的由来。...px 单位仍然与屏幕上像素的缩放值相关联。 em 和 rem 与文档的字体大小相关联，而不是页面的缩放或比例。...如果你放大或缩小，元素的大小和距离保持相对不变。也就是说：你放大得越多，那条线就越粗，段落之间的间距就越大。 为了方便起见，这里有一张截图，显示了同一支笔的400％缩放。
[image.png] 图像是每个网站的关键组成部分。 根据 HTTP Archive ，图像占网页上需要加载总数据的比例达60％以上。...在其他不支持的浏览器上，你可以继续提供原始图像格式。 简单地说，图像质量是衡量图像外观的一种方式。 图像质量和图像大小之间存在直接关联。 更高的质量会导致更高的图像尺寸，从而导致网站速度变慢。...不同的图像压缩方法利用 人眼的局限性 来区分颜色信息的小变化以压缩图像。 作为标准图片来说，80到90的质量等级（按100的比例来说）通常是图像尺寸和质量之间的良好折衷方案。...移动设备的另一个影响因素是设备像素比率或DPR值。现代移动电话具有高密度屏幕，在相同的平方英寸中包含更多像素。 [image.png] 在常规设备上看起来很好的图像在高密度屏幕上看起来会略微模糊。...请注意，没有用于加载图像的序列。 假设你的网页上有100个产品。如果您在同一时间和最开始请求所有100个产品图像，则会减慢加载时间。
随着3G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？...同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。...如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。 如果屏幕宽度在400像素以下，则6张图片分成三行。 mediaqueri.es上面有更多这样的例子。...这里还有一个测试小工具，可以在一张网页上，同时显示不同分辨率屏幕的测试效果，我推荐安装。 二、允许网页宽度自动调整 "自适应网页设计"到底是怎么做到的？其实并不难。...，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。...像素 像素是网页布局的基础，一个像素表示了计算机屏幕所能显示的最小区域，像素分为两种类型：css像素和物理像素。...也就是说在不设置网页的viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。因此我们可以明显看出来，默认为布局视口时，根植于pc端的网页在移动端展示很模糊。...换句话说，理想视口或者说分辨率就是给定设备物理像素的情况下，最佳的“布局视口”。 上述视口中，最重要的是要明确理想视口的概念，在移动端中，理想视口或者说分辨率跟物理像素之间有什么关系呢？...为了理清分辨率和物理像素之间的联系，我们介绍一个用DPR（Device pixel ratio）设备像素比来表示，则可以写成： 1 DPR = 物理像素／分辨率 在不缩放的情况下，一个css像素就对应一个
随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。 什么是响应式？...利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。...”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分...（单位为缩放为 100% 时的 CSS 的像素）。...height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。
1.4.3 设备独立像素（DIP） 设备独立像素（DIP，device-independent pixel，density-independent pixel），简单地来说设备独立像素就是：独立于设备的用于逻辑上衡量像素的单位...（也称物理像素）和CSS像素的比值(设备独立像素)。...PC端页面在手机上显示效果 苹果首先在浏览器上引入了视口的功能，随后各大浏览器都跟随实现。 视口（viewport）是用户网页的可视区域，也可称之为视区。...=1"> 为什么我们指定了meta标签的viewport缩放比例1也可以实现理想视口呢？...这个值是确定整体网页缩放的比例。 缩放比 = 理想视口的宽度 / 视觉视口的宽度 也就是说当视觉视口的宽度 和 理想视口的宽度相等时，则就是1。
大家如果只用电脑浏览网页的话，可能差别不算太大，但是如果使用移动设备（如手机和平板电脑）打开网页，就可能会遇到在不同设备上显示效果不尽人意。...移动端页面需要具备响应式设计，以适应不同大小和分辨率的移动设备屏幕。使用流体网格布局、弹性图片和媒体查询等技术，确保页面在各种设备上都能良好显示。...我们在浏览器页面使用F12，进入开发者工具主流的实现方案有两种：通过 rem、vw/vh 等单位，实现在不同设备上显示相同比例进而实现适配。...是指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果。由于移动设备和桌面设备有不同的屏幕尺寸和分辨率，使用视口可以使网页在不同设备上得到合适的显示。viewport 视口。...只要我们在不同的设备上设置一个合适的初始值，当设备发生变化 font-size 就会自动等比适配大小，从而在不同的设备上表现统一。比如，下面这个例子。
随着3G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ ?...同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。...如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。 ? 如果屏幕宽度在400像素以下，则6张图片分成三行。 ? mediaqueri.es上面有更多这样的例子。...，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。...600像素之间，则加载smallScreen.css文件。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
