本文将探讨实现响应式网页设计的基本技术，重点关注媒体查询、视口单元和流畅布局。 媒体查询 媒体查询是响应式网页设计的基石。它们允许开发人员根据设备的特征（例如宽度、高度和方向）应用 css 样式。...通过使用媒体查询，您可以为不同的屏幕尺寸创建不同的布局。...视口单位 视口单位是相对单位，可以轻松创建可扩展的设计。它们包括 vw（视口宽度）和 vh（视口高度），它们是视口尺寸的百分比。这些单位对于设置适应视口大小的尺寸和间距特别有用。...} 在此示例中，容器跨越视口的整个宽度，确保它适应不同的屏幕尺寸。...组合技术 结合媒体查询、视口单元和流体布局，您可以创建高度响应且灵活的网页设计。
获取到html元素的布局宽度也就是布局视口的宽度，使用媒体查询时 max-width 和 min-width 的值指的也是布局视口的宽。...视觉视口的大小是继承自布局视口的大小，视觉视口和布局视口的宽度为CSS的px数(可变的)。 理想视口 布局视口虽然解决了移动端查看pc端网页的问题，但是完全忽略了手机本身的尺寸。...的设备独立像素为 375px。...布局视口： 375px * 2 = 750px;所以此时布局视口为750px，此时1px等于1物理像素了。...这种布局方案中的1px不一定等于1px，当设备为iphone6时 1px(css) = window.screen.width*dpr = 640 = 375 * 2 / 640 = 1.171875(
响应式布局：根据不同的尺寸适配 viewport width=device-width 设置视口的宽度等于设备的宽度，如果不设置的话，默认视口的宽度是980px 通俗理解：我们这个操作其实展示当前这个页面一共有多宽...苹果手机上需要的素材图片都需要比看到的尺寸大一倍才可以，安卓不用 DPI适配思想:我们在做页面的时候，最好每一张图片都准备两套或三套比如： logo.png 100100 logo@2x.png logo@3x.png 媒体查询...320px) and (max-width:359px){ //大于等于320小于360 } 响应式布局的解决方案：流式布局法 1、容器或者盒子的宽度一般都不写固定的值，而是使用百分比（相对于视口区域的百分比...对于有些屏幕尺寸下我们设置的固定值看起来不是特别好看的话我们使用@media微调 在真实项目中，设计师给我们的设计稿一般是 640960 6401136 750*1334 常用的手机尺寸：5s一下都是320px 6是375px...6plus是414px的宽度 常用的安卓手机尺寸：320、360、480、540、640、720 特殊情况，设计师的设计稿是640px 我们的素材图也是640px的，这样的话在iphone6/
1：1 当我们对浏览器窗口放大二倍时，此时视口的宽度为 640 可以看到，视口变小了缩小为原来的两倍 因为我们将浏览器放大了两倍，原本1CSS像素就可以显示的地方现在需要2个CSS像素展示，所以视口就自然而然的变小了...我们可以通过改变视口的大小来改变CSS像素和物理像素的比值 如Iphone6 的物理像素是750px这个是固定的，我们要调整像素比，只需将视口调小就可以了如 375，此时正好是1：2 通过meta设置视口大小...maximum-scale：最大缩放比 minimum-scale：最小缩放比 user-scalable 用户是否可以缩放 移动端布局适配解决方案 rem+flexible rem+css预处理+媒体查询与...rem+flexible.js做网页适配 vw，vh 1.vw：1vw等于视口宽度的1% 2.vh：1vh等于视口高度的1% 如100vw 在视口宽度为 375px大小时渲染处理的盒子宽度为...width:1.2rem } 我们还提到，第一种直接使用vw的方式会导致网页被无限拉伸，达到不好的用户体验，这里我们可以通过rem的特性解决无限拉伸的问题 1.给body规定最大与最小宽度 2.使用媒体查询限制
响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容； 响应式布局的 5 种实现方案 百分比布局 媒体查询布局 rem 响应式布局 vw 响应式布局 flex 弹性布局...二、媒体查询布局 通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。 响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。...比如现在有 5 个同尺寸的屏幕 （750 640 480 375 320），所有屏幕整体宽分成 10rem 那我们就需要分别得到这几种不同屏幕下对应的 html 根元素的 font-size 大小了。...四、vw、vh 响应式布局 vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。...100vw = 视图窗宽度 ，100vh = 100 视图窗高度 如果移动端有 5 个不同的视口宽尺寸 750 ，640，480，375，320，则在不同尺寸下，对应的 1vw 的 px 值如下表 移动端尺寸
视口（viewport）： 视口指的是移动设备中的设备屏幕窗口。 在移动端浏览器当中，存在着两种视口，一种是视觉视口（也就是我们说的设备大小）， 另一种是布局视口（我们要看的网页的宽度是多少）。...那么375像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。说白了，就是把980px的东西装在了375px的屏幕里。用户不用缩放，就能看到整屏的的页面。...3、媒体查询 媒体查询可以让我们根据设备显示器的特性为其设定CSS样式，配合rem，就可以让宽屏的设备显示大号字体和宽的内容。...通过设备宽度范围区间这样的媒体查询来动态改变rem基准值，其实不够精确，比如：宽度为375px 和 宽度为321px的手机，因为屏宽在同一范围区间内(320375px)，所以会被同等对待...可以通过JS来实现媒体查询的功能。
该方案依然会有很多问题： ●对缩小版页面内细节内容的浏览，依然要依靠放大和滚动，体验不好； ●如果 为 PC 设计的 网页的 CSS 宽度描述大于 980px，那么在移动端展示时，初始页面依然会有滚动条； ●限制了依据视口宽度做媒体查询...(Media queries)机制的有效性，因为视口宽度初始为 980px，浏览器不会以 640px、480px 或更低分辨率来启动对应的媒体查询。...； ●利用了媒体查询做了移动端适配的页面，我们可以设置 viewport 宽度为 device-width，以保证媒体查询技术的有效性，同时还能保证横竖屏切换时，px 单位做大小描述的页面元素的视觉大小一致性...对应的技术方案一般也是对视口(viewport)、媒体查询(media queries)、单位(px/%/rem/vw)的组合使用。 6.1 布局伸缩式 6.1.1 需求描述 ?...这时就需要引入媒体查询，并且对字号使用 px 单位做特殊处理。
媒体查询 使用媒体查询设置差异化CSS样式，媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，当某个条件成立, 执行对应的CSS样式。...} 意思：当检测到视口的宽度为 375px时，html的字号大小为 40px。...作用：可以使用媒体查询, 根据不同的视口宽度, 设置不同的根字号。...（*假定设计稿适配375px视口） 理解：设备宽度为 375px，则基准跟字号为 37.5px，rem值=68/37.5 公式： N*37.5=68 → N=68/37.5 flexible.js 可以使用...---- rem是目前多数企业在用的解决方案，但需要不断修改html文字大小，需要媒体查询media，需要flexible.js，而vw/vh是未来的解决方案，省去各种判断和修改。
viewport（视口） ###3个视口### layout viewport（布局视口）:CSS初始包含块的尺寸。CSS中所有以百分比为单位的长度都是根据它推算出来的。...ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。...，可以通过**-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio**进行媒体查询...手机浏览器是把页面放在一个虚拟的”视口”（viewport）中，视口可大于或小于手机屏幕的可视区域，一般手机默认viewport大于可视区域。...viewport宽度与设备视觉视口宽度一致了。
rem 认识 优点： 可以适应不同大小的屏幕 使用px或者百分比布局不能实现： px单位时绝对单位 百分比布局是宽度自适应，高度固定的 rem使用 rem使用时需要配合: 媒体查询 flexible.js...(推荐使用⭐) rem 单位 相对单位 相对于HTML标签的字号计算结果 1 rem = 1 HTML字号大小 媒体查询 作用 能够检测视口宽度，根据不同的视口宽度设置不同的html字号大小 HTML...字号取值 不同的视口宽度，设置不同的HTML字体大小，取值为视口宽度的1/10 语法 @media (媒体特性) { 选择器 { css属性； } } 例如： @...）一般参考375px 确定基准根字号（1/10视口宽度） rem单位 = px数值/基准根字号值 ，取小数点后4位 flexible 动态的检测手机大小，给网页中html根节点设置不同的font-size...相比较媒体查询，优点： 减少代码量 适配所有类型手机 不用担心电脑显示的缩放 .box { /* 盒子大小: 宽 = 68 / 37.5
常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem...百分比与固定高度布局方案 此方案的前提是设置屏幕为理想视口，然后通过水平百分比布局或者弹性布局，垂直方向一般用固定像素。 优点：布局快速简单方便、在移动设备中水平表现良好差异不大。...3.1 媒体查询改变根元素的字体大小 CSS3新增加了媒体查询功能，也就是可以根据设备媒体的属性做相关的判断，然后执行不同的CSS规则。 媒体查询细节参考。...缺点：媒体查询不能完全枚举，毕竟android的屏幕尺寸碎片化严重，各种尺寸都有，不能完全覆盖，只能大体覆盖。如果想要精确覆盖要么通过js实现，要么用最新的浏览器已经支持的calc实现。...缩放自适应布局方式（推荐***） 简单点说就是，开发的时候根据设计搞完全还原像素，然后根据屏幕的宽度通过js动态改变页面的缩放，恰好是理想视口的大小。 原理核心就是修改页面mate标签的缩放。
常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变...百分比与固定高度布局方案 此方案的前提是设置屏幕为理想视口，然后通过水平百分比布局或者弹性布局，垂直方向一般用固定像素。 优点：布局快速简单方便、在移动设备中水平表现良好差异不大。...3.1 媒体查询改变根元素的字体大小 CSS3新增加了媒体查询功能，也就是可以根据设备媒体的属性做相关的判断，然后执行不同的CSS规则。 媒体查询细节参考。...缺点：媒体查询不能完全枚举，毕竟android的屏幕尺寸碎片化严重，各种尺寸都有，不能完全覆盖，只能大体覆盖。如果想要精确覆盖要么通过js实现，要么用最新的浏览器已经支持的calc实现。...缩放自适应布局方式（推荐***） 简单点说就是，开发的时候根据设计搞完全还原像素，然后根据屏幕的宽度通过js动态改变页面的缩放，恰好是理想视口的大小。 原理核心就是修改页面mate标签的缩放。
; 非根元素设置width:2rem;则换成px表示就是24px； 如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px； 2.3、vm/vh vw ：视口宽度的...1/100；vh ：视口高度的 1/100 —— MDN 在pc端，视口宽高就是浏览器得宽高； 在移动端，这个还不太一样，不过一般设置： 媒体查询。...我们可以用媒体查询和em来实现： @media screen and (min-width: 320px) { body {font-size: 16px} } @media screen and...根据上面说，vw —— 视口宽度的 1/100；vh —— 视口高度的 1/100；感觉已经不用多说了。
弹性盒与网格 设备断点与 CSS 媒体查询 响应式布局的一些最佳实践 响应式设计 著名的网页设计师 Ehan Marcotte 在 2010 年 5 月的一篇名为《Responsive Web Design...-- 假设我们设置视口为完美视口，这时视口宽度就等于设备宽度，CSS 像素为 375px --> 媒体查询，这也是响应式布局的核心技术。...媒体查询 媒体查询（Media Query）是 CSS3 规范中的一部分，媒体查询提供了简单的判断方法，允许开发者根据不同的设备特征应用不同的样式。...srcset 支持定义几组图片和对应的尺寸 sizes 支持一组媒体查询条件 <!
前言 移动端开发的时候，我们拿到的 UI设计稿 通常都是 640px 或者是 750px ,明明我们的 设备视口宽度 是设计稿的 一半 ,这是为什么呢？...比如iPhone5使用的是Retina视网膜屏幕，用2x2的Device Pixel代表1x1的CSS Pixel，所以设备像素数为640x1136px，而CSS逻辑像素数为320x568px 所以，1...所以 dpr=2 时，1个CSS像素由4个物理像素点组成（也可以这样理解 320x568px:``640x1136px = 1:4 ） 注意DPR不是单位，而是一个属性名，比如在浏览器中通过window.devicePixelRatio...目前来说，都是以iphone6设计稿去适配各种机型，所以讨论暂时考虑iphone机型，至于怎么做适配，后续章节会讨论到 上一章节我们讲过，布局视口跟理想视口的一致的时候，用户看到的效果最佳，以iphone6...来说，他的视口宽度为375px，视口的像素单位是逻辑像素 ，我们知道UI设计稿的的像素单位就是按照 设备像素来的 ,所以按照DPR为2换算成物理像素为 750px ，显然没问题（PS:DPR为1或者为3
rem 是一个相对单位，1rem为1html字号大小 rem使用 使用媒体查询设置差异化CSS样式 @media (媒体查询) { 选择器 { 属性...} } rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10 @media (width:320px) {...vw：viewport widthl ，vh：viewport height 1vw = 1/100视口宽度 1vh = 1/100视口高度 vw的好处自动是视口宽度的1/100 自动计算不需要在引入额外...js，不过又移动兼容性问题 设计稿一般是375px，1vw就是3.75px flexible 移动设备视口宽度很多，我们不能一个一个使用媒体查询，我们使用flexible配合rem使用 flexible.js...核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
480 IPhone 5 / 5s 640 * 1136 320 * 568 IPhone 6 / 7 / 8 750 * 1334 375 * 667 HUAWEI P10 1080 x 1920 360...x 640 IPhone X 1125 * 2436 375 * 812 CSS 像素 / 逻辑像素 CSS 像素是一个抽象的长度单位，单位 px，主要用来精确度量和控制 WEB 网页上的内容。...移动端 移动端的视口与 PC 端不同，有三个视口 布局视口 视觉视口 理想视口 布局视口 布局视口是用来放置网页内容的区域。...理想视口的好处 注意：理想视口不是真实存在的视口 设置理想视口的方法 2-缩放 PC 端 放大时 布局视口变小 视觉视口变小 元素的像素大小不变 缩小时 布局视口变大 视觉视口变大 元素的像素大小不变...*100/375+'px'; 方法二 编写时按照 IPhone 6 直接使用 rem 单位进行布局 完美视口设置 设计稿总宽 375 布局 以 font-size 100px 进行尺寸换算，设置 rem
在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr： 我们根据这个像素比，来算出他对应应该有的大小,但是暴露个非常大的兼容问题 ?...webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden; } css根据设备像素比媒体查询后的解决方案...我们在移动端视口要想视觉效果和体验好，那么我们的视口宽度必去无限接近理想视口 理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示...于是上述的meta设置，就是我们的理想设置，他规定了我们的视口宽度为屏幕宽度，初始缩放比例为1，就是初始时候我们的视觉视口就是理想视口！...在跨设备类型的时候（pc 手机 平板）使用媒体查询 5.
/ 320 = 2iPhone678: 750 / 375 = 2iPhoneX: 1125 / 375 = 3在 JS 中我们可以通过 window.devicePixelRatio 获取当前的设备像素...window.devicePixelRatio);// 1 / 1 = 1;1 / 2 = 0.5;图片如何缩小通过 的 initial-scale 属性来缩小，注意点: 缩放视口后视口大小会发生变化...补充在上方我们是如何进行缩小的是不是通过将整个视口大小进行缩小的，但是在视口缩小之后我们里面的内容并没有随之而然的进行缩小，这个原因其实也很简单，在如下代码我设置了视口的宽度等于设备的宽度，然后在获取了一下视口的宽度...了，那么这就是为什么我们将整个视口缩小之后它里面的内容并没有进行缩小的原因，原因就是因为它在进行缩小的时候首先会将视口变大一半，原本我设置的宽度等于设备的宽度应该长相如下这么宽：图片但是它发现你要缩小...，它会先进行扩大一半，本来如果一样的话两个都是 320 480，那么这个时候呢它发现你要缩小它会先进行扩大一半，扩大一半之后就变为了 640 960 那么这个时候你就会发现已经与视口的宽度是一个一一对应的关系了
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
