例：html中字体尺寸为 20px，盒子宽度为 5rem，则最后显示的盒子宽度为 100px。
注意： 如果电脑显示的缩放为125%，那么给媒体特性设置宽度时只设置手机型号的宽度不起作用。（因为电脑显示的手机宽度是 ：125%×真实手机宽度）
现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。看到问题了吗？一个宽度只有375像素的手机，却能够显示宽度为980像素的网页，自然而然，网页会被缩小。
屏幕大小指屏幕的对角线的长度，单位一般是英寸。常见的手机屏幕大小 3.5、4、4.7、5.0、5.5、6.0等。常见手机屏幕查看网址 http://screensiz.es/
优化以前写过的一篇文章：https://www.cnblogs.com/beileixinqing/p/11283315.html
浏览器对象模型BOM（Browser，Object，Model）是以window对象为基础的，这个对象代表了浏览器窗口，页面可视区域，它还被复用为Es的全局对象Global，所有的原生类型的构造函数和函数都从一开始就存在于这个对象之上。
viewport是移动端跨屏适配的基石，吃透这一概念，任何复杂多变的适配需求，都可以手到擒来。
和百分比有区别的,百分比是相对于父元素来说的,而vw和vh总是针对当前视口来说的.
写在前面：本人刚刚接触移动端开发，希望自己的见解能够帮助到他人，不足之处还望提醒。
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为750 px，则共有个750 物理像素，则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素
在 JS 中我们可以通过 window.devicePixelRatio 获取当前的设备像素。
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。
今天移动web开发学完了，整理一下思路，移动web首先学习的就是就是flex布局。记录一下flex布局和移动适配的一些知识。
听说糙着干活的只靠 px 和 % 闯天下，不知道在看文章的你是不是也是其中一员，哈哈哈哈
这里说明一下，无论dpr多大，1px的大小通常来说是一致的，这也就意味着，随着dpr的增大，物理像素点会越来越小，这样才能容纳更多的物理像素，才能更高清，更retina
最近开发并上线了一款H5项目，在这里想和大家分享一下关于项目中使用到的移动端适配技巧，如果对你们有所帮助的话，就多多点赞收藏😃各位看官老爷别着急，在讲页面适配之前，我们先来捋一捋viewport（视口）的概念~在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI， 菜单栏等——即指你正在浏览的文档的那一部分。一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口1.1 布局视口图片在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，用户可以手动对网
很久没有做过移动端的项目了，关于移动端的自适应，最早之前用rem，我个人觉得效果很不错。忘记是哪个大神的文章提到过，lib-flexible有一些问题，建议使用viewport，今天使用一下viewport。
前几天，我们写了关于Chrome的FCP,看后台数据，反响还是不错的。那么，今天我们继续讲另外一个比较重要的性能指标LCP。
在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。
用截图工具（截图工具测得的像素等于物理像素）测得CSS中的1px 的等于物理像素1px的 那么他们的比值就是1：1
原理：在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同大小的屏幕下，看到不同的页面布局和样式。
在做移动端适配的时候，很多人第一反应就是使用 rem ，通过动态设置 html 上的 font-size 来进行页面的自适应，基本原理就是 rem 表示的是 root em ，页面中所有的值都是基于html上的 font-size ，相对的进行对应的变化
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。 1. 关于屏幕 1.1 屏幕尺寸 设备屏幕尺寸是指屏幕的对角线长度。比如：iphone6/7是4.7寸，iphone6/7p是5.5寸。 1英寸 = 2.54厘米 3.5in = 3.5*2.54cm = 8.89cm 4.0in = 4.0*2.54cm = 10.16cm 4.8in = 4.8*2.54cm = 12.192cm 5.0in = 5.
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
老马初始学习视口的概念的时候，看了很多的文章，看来很多的资料，鲜有人能把这个东西讲的非常透彻的。老马接下来就从初学者能看懂的角度去讲解视口和适配的方案。
响应式网站:即pc和移动端共用一套网站，只不过在不同宽度的屏幕下，样式会自动适配。配合媒体查询监听，通过判断屏幕宽度来改变样式，以适应不同终端。例如：三星电子官网: www.samsung.com/cn/ 缺点:制作麻烦，需要花很大精力去调兼容性问题
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。
clientTop，offsetTop，clientHeight 以及 scrollTop 各种关于图片的高度作比对
[总结]我对移动端适配的了解 不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。b
有些动画是页面一加载就要的，还有一些动画是需要页面滚动到那个元素才要展示的。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
在上一篇 【HelloCSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题：
https://juejin.cn/post/6951575591099301895
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。
在 《Fabric.js 使用纯色遮挡画布（前景色）》 中讲到使用纯色的方式遮盖画布。如果你的常见需要使用图片来遮盖的话，fabric.js 也提供了相应的属性来配置。
HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表。比如，一个页面在屏幕上显示时使用无衬线字体，而在打印时则使用衬线字体。screen和print是两种已定义的媒体类型。媒体查询让样式表有更强的针对性，扩展了媒体类型的功能。
布局视口 - Layout ViewPort 指的是 在 浏览器 中，用于 显示文档的区域大小和位置。它是指 网页中可见部分的大小，即浏览器窗口中显示的内容大小。
meta 标签提供该页面的一些信息，比如针对搜索引擎和更新频度的描述和关键词，它还可以控制页面缓冲、响应式窗口等，定义 meta 标签有利于网站 SEO（有利于搜索引擎访问），对于响应式窗口也起着作用，因此 meta 标签是 HTML 中很重要的一个标签。在生成默认的 HTML 文档结构时，通常会有两个 meta 标签：
本期给大家在webpack5中如何配置css用到的解析和插件的使用，更准确的说是PostCSS的插件。众所周知，现在大部分前端项目都在使用webpack做打包，打包做解析的比较重要目的一个是给js做转化，比如es6转es5，混淆压缩等。然后就是对css进行解析，比如说scss转css，less转css，前缀自动补全，还有移动端项目px转rem或者px转vw。今天我们就介绍将后者其中的前缀自动补全，px转rem，px转vw，这都是在PostCSS中极为常用的插件。
在最近发布的 Chrome 108 中，带来了几个新的 CSS 视口单位，下面我带大家一起来看一下：
一般来说，我们使用 height:100vh 进行全屏布局，这是一种很方便的响应式方法。
最近做了一些响应式的页面，遇到了一些问题，想了些解决方法，在这里总结一下。目前响应式的主流实现方式是百分比布局，加上媒体查询@media screen。关于媒体查询还有媒体查询的一些兼容性问题，网上介绍的很多
``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的图片文件 ├─ /js/ ························ 自己写的JS脚步 ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】 ├─ /favicon.ico ················ 站点图标 └─ /index.html ················· 入口文件
最近查阅了一些帖子，发现了一个极其强大的方法，其兼容性有待提高~~（但已有相关的的Polyfill方式）
相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。
大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。
企鹅 fm 点歌台是 2.5 将会新出的功能，其中有两个点觉得值得分享，一个是老生常谈轮子都不知道造了多少个的 banner 轮播，还有一个就是企鹅 FM 移动端对齐的弹幕。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
