； ●需要充分利用屏幕物理像素点做 1 像素极细边线的页面，我们可以设置 viewport 缩放倍数为 1/dpr，以使得 css 中的 1px 刚好对应设备物理像素中的 1 个点； ●需要根据屏幕宽度弹性伸缩的页面...屏幕适配无粒度区分，同一设备上做宽度变化时，内容布局无缝圆滑变化；技术实现通常为，一套代码适配所有屏幕。 自适应。...屏幕适配有粒度区分，原则上不做过渡态的 UI 设计，同一设备上做宽度变化时，内容布局卡顿式梯级变化；技术实现通常为，多个屏幕对应多套代码。（演示如下图） ?...，以保证宽度变化时的定位稳定。...●设置 viewport 宽度为 device-width 或其他固定值，以得到 px 为单位的文字、图标或边线等期望的渲染效果 ●css 单位使用 rem，js 根据 viewport 宽度以及 css
，区块的边距也应该变化 能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用 能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏...能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断 放弃使用像素作为尺寸单位：用dp(对于前端来说，这里可能是rem)尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致...设备独立像素 以 iPhone6/7/8为例，这里我们打开 Chrome 开发者工具： 这里的 375 * 667 表示的是什么呢，表示的是设备独立像素（DIP），也可以理解为 CSS 像素，也称为逻辑像素...这里使用 CSS 像素来记忆，也就是说。我们设定一个宽度为 375px 的 div，刚好可以充满这个设备的一行，配合高度 667px ，则 div 的大小刚好可以充满整个屏幕。...flexible 基于此，淘宝早年推行的一套以 rem 为基准的适配方案：lib-flexible。
CSS中所有以百分比为单位的长度都是根据它推算出来的。...ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。...CSS像素:px(设备独立像素) 逻辑像素，浏览器使用的抽象单位(之所以叫抽象单位，是因为其可以根据不同的设备和不同的关系来变大变小，所以称为抽象单位)为Web开发者创造的，在CSS和JavaScript...px是相对长度单位，相对的是设备物理像素(device pixel) 注意：在旧的屏幕上，当缩放程度为100%时，一个CSS像素等于一个设备像素。...，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局 ###调整html元素大小的值### 有css与js两种方式 css方式： html { font-size
移动web开发之rem适配布局 方案： 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局，那高度如何布局？...怎样让屏幕发生变化的时候元素高度和宽度等比例缩放？ 1. rem基础 rem单位 rem(root em)是一个相对单位，类似于em,em是父元素字体大小。...使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。...方案二更简单 4.3 rem实际开发适配方案一 rem+媒体查询+less技术 1.设计稿常见尺寸宽度 设备 常见宽度 iPhone4.5 640px iphone678 750px android...常见320px、360px、375px、384px、400px、414px、500px、720px 大部分4.7~5寸的Android设备为720px 一般情况下，我们以一套或两套效果适应大部分的屏幕
公司内部有一款企业社交产品share，近期打算开发手机版，初期规划是通过webapp的方式嵌入到另一款即时通信native app。...eg： 一个在480分辨率下宽高为64px64px的元素，其父容器的字号（font-size）为20px，那么它折算成em为单位就是3.2em3.2em。...当其父容器字号基准根据不同的分辨率变化的时候，该元素的宽高也能根据这个字号基准成比例的缩放，就能实现响应式变化。...，device-width返回的是独立像素dips值（即：物理像素除以像素比devicePixelRatio） 2、在Android 设备上，device-width返回的是物理像素值** 因为iPhone...，会以各自的字号大小为基准，成比例的缩放。
CSS像素与设备像素 设备像素（screen.width/height，单位是设备像素）实际上就是物理像素，衡量屏幕的分辨率实际上就是设备像素的多少，而CSS像素是一种抽象的宽度衡量。...让我们举一个关于缩放的栗子，浏览器实现缩放的原理实际上就是通过拉伸像素来实现的： 假设现在整个屏幕来展现一个CSS像素宽度为128px的元素，屏幕的设备像素宽度是128px，那么实际上1个CSS像素等于...设备像素对于开发来说基本上没用，缩放比例对你来说也没有什么影响，CSS会将展示效果处理的很好，但理解这个概念对接下来讲的会有所帮助，接下来很多度量是以CSS像素为单位的。...可以看到，当缩放比例为100%时，layout viewport = visual viewport，当用户将页面放大时，显示在屏幕上的页面部分变化了，所以visual viewport变化了，而layout...viewport的大小还是原来的大小（这里以CSS像素单位来理解） 度量visual viewport是通过window.innerWidth/Height来度量的，当然单位也是CSS像素。
的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设备动态适配缩放 开发直接按照设计稿编写固定尺寸元素...id="header"> div> 2.2 弹性盒子+高度固定布局 logo下面一行的左右两个盒子，高度不变，宽度虽然有变化，但是左右两个盒子都基本上靠在两侧，可以用浮动实现，也可以用弹性盒子实现.../* 媒体查询以@media开头，然后后面可以跟上 判断的条件，比如：screen表示屏幕设备, and是并且的意思， min-width是最小宽度的意思。...比如： 头像在不同设备上一般都会设置固定像素的大小 宽度可能超过50%的盒子尽量用百分比或者弹性盒子布局 高度和宽度需要同时根据屏幕自动缩放的时候，推荐使用rem布局 5....缩放自适应布局方式（推荐***） 简单点说就是，开发的时候根据设计搞完全还原像素，然后根据屏幕的宽度通过js动态改变页面的缩放，恰好是理想视口的大小。 原理核心就是修改页面mate标签的缩放。
Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设备动态适配缩放 开发直接按照设计稿编写固定尺寸元素...id="header"> div> 2.2 弹性盒子+高度固定布局 logo下面一行的左右两个盒子，高度不变，宽度虽然有变化，但是左右两个盒子都基本上靠在两侧，可以用浮动实现，也可以用弹性盒子实现.../* 媒体查询以@media开头，然后后面可以跟上 判断的条件，比如：screen表示屏幕设备, and是并且的意思， min-width是最小宽度的意思。...比如： 头像在不同设备上一般都会设置固定像素的大小 宽度可能超过50%的盒子尽量用百分比或者弹性盒子布局 高度和宽度需要同时根据屏幕自动缩放的时候，推荐使用rem布局 5....缩放自适应布局方式（推荐***） 简单点说就是，开发的时候根据设计搞完全还原像素，然后根据屏幕的宽度通过js动态改变页面的缩放，恰好是理想视口的大小。 原理核心就是修改页面mate标签的缩放。
css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。...后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍...就是我们开发过程中使用的css中的px 设备像素比（device pixel radio） 设备像素比 = 物理像素 / 设备独立像素，单位是dpr！...单位，但是后面要说的rem是基于em的，所以，对em进行简单介绍 em 是相对长度单位。...，能显示的css的px数也不同， 如果我们写一个div，宽度是375px，375px在这个屏幕（iPhone6）上是刚刚满屏，因为这个屏幕宽度刚刚是375px( 设备独立像素)， 当我们换另一个宽度是414px
前言 工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rem\em\css px\device px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~ PC...device px（设备像素）和 css px（css像素） 通常在PC端上面，我们并不需要考虑设备像素和css像素之间的差别，以目前的pc来看，1个设备像素通常等于1个css像素。...听起来有点难以理解， 下面讲一个例子： 假设， 你给某个div元素设置了width：50%的样式后， 当你缩小放大浏览器的时候，你会发现div元素总是占据了50%的宽度，我们知道，宽度百分比是依赖它的包裹元素...（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。...最后，移动端 iOS 8 以上以及 Android 4.4 以上已经有了vw\vh单位， 1vw\1vh相当于viewport的百分之一宽/高，也就是我们上面所说的x单位， 如果你的手机支持该api，
后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍...就是我们开发过程中使用的css中的px 设备像素比（device pixel radio） 设备像素比 = 物理像素 / 设备独立像素，单位是dpr！...X 900px； 这里会遇到另一种情况 浏览器缩放 缩放是缩放CSS像素(缩放比例为1时,一个CSS像素等于一个屏幕像素)，就是在屏幕分辨率不变的情况下，用户对浏览进行了缩放 强调一点，用户的缩放行为是对浏览器进行的...单位，但是后面要说的rem是基于em的，所以，对em进行简单介绍 em 是相对长度单位。...，能显示的css的px数也不同， 如果我们写一个div，宽度是375px，375px在这个屏幕（iPhone6）上是刚刚满屏，因为这个屏幕宽度刚刚是375px( 设备独立像素)， 当我们换另一个宽度是414px
文中讲到响应式的概念源自响应式建筑设计，即房间或者空间会根据其内部人群数量和流动而变化。...-- 下面的 meta 定义了 viewport 的宽度为屏幕宽度，单位是 CSS 像素，默认不缩放 --> <meta name="viewport" content="width=device-width...1vh = 1% 视口高度 以 IPhone X 为例，vw 和 CSS 像素的换算如下， 为完美视口，这时视口宽度就等于设备宽度，CSS 像素为 375px --> 单位（em，rem，百分比，vw，vh等），布局方案（FlexBox，Gird）以及媒体查询等技术，其中不乏很多前辈们的最佳实践，作为开发者我们应该用这些经验，以更好地优化不同尺寸大小设备的用户体验
设备独立像素 以 iPhone6/7/8为例，这里我们打开 Chrome 开发者工具： 这里的 375 * 667 表示的是什么呢，表示的是设备独立像素（DIP），也可以理解为 CSS 像素，也称为逻辑像素...这里使用 CSS 像素来记忆，也就是说。我们设定一个宽度为 375px 的 div，刚好可以充满这个设备的一行，配合高度 667px ，则 div 的大小刚好可以充满整个屏幕。...通过控制每个像素点的颜色，就可以使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为pt。...非常重要的一点是，提高可访问性也能让普通用户更容易理解 Web 内容。...我们需要基于图片的功能加以区分： 信息性图像：以图形方式表示概念和信息的图像，通常是图片、照片和插图。alt 替代文本应该至少是一个简短的描述，传达图像所呈现的基本信息。
3.2 移动端开发 在 iOS、 Android和 ReactNative开发中样式单位其实都使用的是设备独立像素。...iOS的尺寸单位为 pt， Android的尺寸单位为 dp， ReactNative中没有指定明确的单位，它们其实都是设备独立像素 dp。...端开发 在写 CSS时，我们用到最多的单位是 px，即 CSS像素，当页面缩放比例为 100%时，一个 CSS像素等于一个设备独立像素。...pixels（像素）为单位， 定义布局视口的宽度。...height| 正整数或 device-height | 以 pixels（像素）为单位， 定义布局视口的高度。 initial-scale| 0.0-10.0|定义页面初始缩放比率。
这两种单位可以让页面元素的大小随着根元素（对于 REM）或视口宽度（对于 VW）的大小变化而变化，从而适应不同尺寸的屏幕。...中设置的 remUnit 值相同 propList: ['*'], minPixelValue: 2 // 设置最小的转换尺寸，如果设置为 1 则会转换所有大小的像素值...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 现象 在 iOS 设备上，单击事件可能会有 300ms 的延迟，因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...原因 这是因为移动设备的物理像素密度与 CSS 像素的比例（设备像素比）导致的。 解决方案 利用伪元素和 scale 来实现 0.5px 的效果。...通过指定 body 背景色为#fff，来兼容更多设备。
弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。 试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。 11、用纯CSS创建一个三角形的原理是什么？...偶数字号相对更容易和 web 设计的其他部分构成比例关系。...43、CSS3文本属性 text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色 text-overflow:规定当文本溢出包含元素时发生的事情...） 移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。...1pt = 1/72in) 像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
