译者：黄梵高 https://juejin.cn/post/6887478219662950414 在浏览器里进行用户追踪会引发关于隐私和数据保护一次又一次的讨论。...找到设备类型信息 媒体查询应该是每一个 web 开发者都知道的。有了这个，我们可以让 CSS 代码只在某些确定的屏幕条件下执行。所以我们可以为智能手机或平板电脑等，编写自己的查询条件。...只有在用户设备与媒体查询匹配的时候，才请求背景图片。 如果现在一部智能手机访问这个页面，媒体查询会执行，并发送请求背景图片的请求，同时服务端会输出它是智能手机。...在 CSS 中，我们可以使用多种后备方案，换句话说，可以指定多种字体。如果第一个在系统上不起作用，浏览器将会尝试第二个。...以至于在 MacBook 上，使用的是第一种字体，即系统自己的字体。在类似 Windows 的其他系统上，系统检查字体是否存在。当然，肯定不存在，因此尝试使用下一种我们自己定义的字体。
这可能会让人困惑，因为w不是CSS单位，实际上w代表图像的实际宽度，以像素为单位。您可以通过在文件浏览器/资源管理器中检查图像来轻松找到这个宽度。...第一部分是我们要检查的媒体查询。在这种情况下，我们要检查屏幕宽度是否小于800像素。第二部分是如果媒体查询为true时我们要使用的尺寸。...潜在的陷阱 sizes属性非常强大，但在使用它时需要注意以下几点。 顺序很重要 如果您的sizes属性中有多个媒体查询，将选择第一个为true的媒体查询对应的图像。这意味着您的媒体查询的顺序很重要。...例如，如果您的页面有一个宽度跨越整个页面的大标题，您可能希望在移动设备和桌面设备上显示不同的图像，因为您可以在桌面设备上使用更多细节的图像。这就是picture元素的用途。...它的工作方式类似于sizes属性中的媒体查询，但是在source元素的media属性中，您只能定义一个媒体查询。这些查询与sizes属性一样，从上到下逐个检查，只有第一个匹配的媒体查询会被使用。
移动端页面需要具备响应式设计，以适应不同大小和分辨率的移动设备屏幕。使用流体网格布局、弹性图片和媒体查询等技术，确保页面在各种设备上都能良好显示。...是指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果。由于移动设备和桌面设备有不同的屏幕尺寸和分辨率，使用视口可以使网页在不同设备上得到合适的显示。viewport 视口。...综合起来，这行代码的作用是告诉浏览器，网页的布局应该以设备的宽度为基准，初始缩放级别为 1.0。这样可以确保在移动设备上获得更好的显示效果，而不会出现不必要的缩放或变形。...){样式代码}only 关键字表示仅在媒体查询匹配成功时应用指定样式（可以通过它让选中的样式在老式浏览器中不被应用），例如：/*在老式浏览器中被解析为media=“screen”，它把后面的逻辑表达式忽略了...所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略。
无论采用上述哪种方案，为手机或平板电脑创建网站的第一步是先将浏览器的可视范围定下来，这就是viewport meta标签发挥作用的地方。...媒体查询使您可以根据当前设备尺寸来设置元素的样式。现在流行的CSS策略是首先编写移动样式，然后在其上构建更复杂的桌面版网页样式。...下面是移动优先样式的常见用例示例，其中对于较小的设备，列的宽度为100%，但在较大的视口中，列的宽度为50%。...虽然媒体查询对于响应式网页设计是必不可少的，但许多其他新的CSS功能也在浏览器中得到广泛采用和支持。在响应性网页设计方面，Flexbox是这些新的重要CSS功能之一。 什么是Flexbox？...适用于桌面设备的样式，我们利用与上一节中的示例类似的媒体查询将容器main元素设置为flex-wrap: nowrap，这样可以确保子元素不会换行，通过在媒体查询中设置div为flex-basis: 33%
缓存机制在响应式Web设计中，媒体查询（Media Query）的作用是什么？A. 控制打印样式B. 根据设备特性应用不同的样式C. 提高页面加载速度D....JavaScript中，=== 运算符用于检查值和类型是否完全相等。在计算机网络中，IP地址分为公有IP和私有IP。...浏览器使用CORS来确保在不同域之间进行安全的数据传输，防止潜在的安全威胁。...响应式设计通过灵活的网格布局、弹性图片和媒体查询等技术，使网站能够动态调整布局和样式以适应不同的屏幕大小。...媒体查询： 使用CSS媒体查询根据设备特性（如屏幕宽度、设备类型）应用不同的样式。这使得可以根据屏幕尺寸调整字体大小、布局等。
媒体查询 什么是媒体查询 媒体查询（Media Query）是CSS3新语法。...使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机...、Android手机，平板等设备都用得到多媒体查询 媒体查询语法规范 用 @media开头 注意@符号 mediatype 媒体类型 关键字 and not only media feature 媒体特性必须有小括号包含...rem实际开发适配方案1 ①假设设计稿是750px ②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份） ③每一份作为html字体大小，这里就是50px ④那么在320px设备的时候...，我们默认html字体大小为 50px，注意这句话写到最上面 rem 适配方案2 手机淘宝团队出的简洁高效 移动端适配库 我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理 它的原理是把当前设备划分为
在媒体查询出现之前，针对不同尺寸设备的设计常常依靠JS或PHP等依靠userAgent来勉强实现，而现在自适应的响应式设计成为了家常便饭 [I]....定义和规范 媒体查询包含一个可选的媒体类型和零个或多个表达式, 根据媒体特性限制样式表的作用域....例如width, height, color等 CSS3中的媒体查询让内容的呈现可以根据设备进行变化, 而不需要改变内容本身 1.1 CSS2中的媒体查询 在CSS2中，媒体查询只使用于和...– 输出设备中颜色查询表中的条目数量 monochrome – 指定了一个黑白（灰度）设备每个像素的比特数 scan – 检查电视输出设备是顺序扫描还是隔行扫描 grid – 判断输出设备是网格设备还是位图设备...-- fallback --> 看上去很简单，但在实际应用中，考虑到各种情况，可能会是这样：
以上是我们在开发过程中常用到的三种媒体查询特性小于、大于、等于，除此之外她还有其他特性，下面是我查找总结媒体查询的其他参数和用法. width/height：浏览器可视宽度(也叫视口)/浏览器可见高度...（例如：min-color:32 就是检测设备是否拥有32位颜色 #000000） color-index:检查设备索引颜色表中的颜色(颜色值不能小于0)。...orientation：判断当前设备是横屏还是竖屏. aspect-ratio:检测浏览器可视宽度和高度的比例。...，这个怎么搞...IE8以下放弃算求，但是有些公司，用户又不多啊，非得要求你小前端要响应式IE8以下，还好可以在项目中导入Respond.js，这样使用CSS3的媒体查询就有作用了，对于这个Respond.js...对于我来说，有点难把握，做完移动端网站我就有点后悔用了它，要说，不管什么，会写源生的才是最Nice的. 2.
字体是矢量的:不失帧 前端页面可用于android访问 优点:移动设备优先 支持所有浏览器(360不算浏览器) 自适应屏幕大小 目录结构: 若浏览器环境变化,引入js 窗口随系统尺寸Grid最多分为12列 网格系统 1,table ,加载完所有,显示表格 2,div+css,加载一点,显示一点:操作难度大 移动设备策略... 媒体查询,(渐进增强:向上兼容)内容先显示 行必须放在.container class内 内容放在列内,列是行的直接子元素 预定义网格:.row 和.col(列)-xs(设配)-4(所占列数...) 使用媒体查询 语法:@media 媒体类型 and(媒体特性:作用的范围){你的样式} @media screen and (max-widthj:480px){ .a{display...:none} //当小于480px时样式起作用 } 就近原则:标签内style 与class 默认style生效 加入!
Query) 是CSS3新语法 使用@media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面...目前针对很多苹果、Android手机、平板等设备都用得到多媒体查询 ---- 语法规范: 1️⃣media type 查询类型: 将不同的终端设备划分成不同的类型，称为媒体类型 值 说明 all 用于所有设备...4️⃣媒体查询+rem实现元素动态大小变化: rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸 媒体查询可以根据不同设备宽度来修改样式 媒体查询+rem 就可以实现不同设备宽度...文件中导入less文件 ---- 1️⃣ rem 适配方案: 让一些不能等比自适应的元素，达到当设备尺寸发生改变时，等比例适配当前设备 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用...rem做尺寸单位，当html字体大小变化 元素尺寸也会发生变化，从而达到等比缩放的适配 rem 实际开发适配方案: 按设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小 CSS
CDN的作用 CDN一般会用来托管Web资源（包括文本、图片和脚本等），可供下载的资源（媒体文件、软件、文档等），应用程序（门户网站等）。使用CDN来加速这些资源的访问。...（1）在性能方面，引入CDN的作用在于： 用户收到的内容来自最近的数据中心，延迟更低，内容加载更快 部分资源请求分配给了CDN，减少了服务器的负载 （2）在安全方面，CDN有助于防御DDoS、MITM等网络攻击...CDN的原理 CDN和DNS有着密不可分的联系，先来看一下DNS的解析域名过程，在浏览器输入 www.test.com 的解析过程如下： （1） 检查浏览器缓存 （2）检查操作系统缓存，常见的如hosts...文件 （3）检查路由器缓存 （4）如果前几步都没没找到，会向ISP(网络服务提供商)的LDNS服务器查询 （5）如果LDNS服务器没找到，会向根域名服务器(Root Server)请求解析，分为以下几步...CNAME（意为：别名）：在域名解析中，实际上解析出来的指定域名对应的IP地址，或者该域名的一个CNAME，然后再根据这个CNAME来查找对应的IP地址。 4.
给出设备像素中相对于屏幕的坐标 媒体查询： 基于viewport（documentElement .clientWidth/Height） @media all and (max-width: 400px...) 基于屏幕（screen.width） @media all and (max-device-width: 400px) Mobile 在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的...，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px...究其原因，是因为设计稿是750px， 里面的1px实际上在真机只有0.5px，所以就有了著名的1px问题。...问题的解决 1.直接使用0.5px 在iOS8下，苹果系列都已经支持0.5px了，那么意味着在devicePixelRatio = 2时，我们可以借助媒体查询来处理：著作权归作者所有。
A：在CSS3中加入了Media Queries模块（媒介查询)，是制作响应式布局的一个利器，使用这个工具我们可以非常方便快捷的制造出各种丰富的实用性强的界面；网页制作者只需要针对不同的浏览器窗口尺寸来编写不同的样式...可以更精确作用于不同的媒体类型和同一媒体的不同条件，如min和max标识大于等于 和 小于等于。...如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上 使用方式：在CSS样式中内嵌“@media”，使用外部样式表的引用在@import...样式代码 } 使用only关键字的作用是让那些不支持Media QueriesType的设备的浏览器将表达式的样式隐藏起来。...在移动设备上设置原始大小显示和是否缩放的声，是在页面的头部\之间加上下面这样的语句∶ /** 设置默认的宽度为设备的宽度 **/ <meta name="viewport"
虽然现代浏览器在处理它们的方式上相当聪明，但它们仍然会带来一个问题，特别是如果你有 多重 CSS/JS文件，因为有更多的机会发生渲染阻塞。...我们经常看到带有组合CSS/JS文件的页面，这些文件远远超过 2 MB 在 未压缩的 大小。这对浏览器来说是一项巨大的任务，尤其是在中端移动设备等低功耗硬件上。 ...在浏览器可以渲染任何内容之前，需要首先处理组合的CSS/JS文件，这可能会阻止页面组件的任何早期渲染。...这样，访问者也可以尽早开始看到页面上的内容，让他们放心，你的页面正在运行中 3.CSS/JS组合可能会破坏你的网站 CSS/JS文件在分开时很好，但在组合成单个文件时，它们可能不会很好地发挥。...即使东西在视觉上看起来很好，一些引擎盖下的功能可能已经坏了，你可能要到很久以后才会发现。例如，按钮在页面上不起作用，或页面元素消失，或滑块无法按设计工作，等等。
一、页面head头部的meta声明 针对移动设备的特性，在head标签内需要添加一些特殊的声明。...telephone=yes就开启了把数字转化为拨号链接，要开启转化功能，这个meta就不用写了,在默认是情况下就是开启！ 二、媒体查询 在规划整个页面的样式时，我们首先要想好的就是如何做媒体查询。...1、常用属性 目前，媒体查询中最常用的属性有： max-device-width 用于创建移动版网页 max-width 用于根据浏览器窗口的当前大小 改变样式 orientation 用于根据iPad...了解了媒体查询，我们最先想到的是针对不同分辨率的设备，设置不同的字体大小、图片图标的大小。设置字体大小问题不大，但是一个网站有很多个页面，图片、图标的个数一般有不少。...2、代码实例（媒体查询） 实际应用的时候，需要先针对某一分辨率的设备，来写默认的样式。
为前缀的属性集合） URLSearchParams（查询参数） hidden（隐藏元素） contenteditable（使元素可以被编辑） spellCheck（检查拼音） classList（类名控制器...端标签栏切换、最小化会触发、在移动端程序切到后台会触发，简单说就是页面消失了?...： 使用场景：当程序切到后台的时候，如果当前有视频播放或者一些动画执行，可以先暂停✅ - deviceOrientation 陀螺仪，也就是设备的方向，又名重力感应，该API在IOS设备上失效的解决办法...（此时手机在不停的转动）： 使用场景：页面上的某些元素需要根据手机摆动进行移动，达到视差的效果，比如王者荣耀进入游戏的那个界面，手机转动背景图会跟着动?...{ document.body.innerHTML += `屏幕旋转后的角度值：${window.orientation}`; }, false); 效果如下： 也可以使用css的媒体查询
应用在移动设备上就会带来严重的性能问题。...查询，你可以针对不同的媒体类型定义不同的样式。...在移动端，由于通过模拟器改变的是移动端设备的宽度，所以 min-width 与 min-device-height 效果一样； 在 PC 端，如果改变浏览器的宽度，而我们电脑的宽度并没有改变，所以设备的宽度一定...，最终的效果就是只有一个范围起作用。...原因：如果结构如上面示例的那样，并且媒体查询条件由重叠的话，后面的媒体查询样式设置会覆盖前面的媒体查询设置，为了避免发生这种情况，我们就应该遵循一定的规律，使得不同的媒体查询条件下，执行不同的样式，而不会发生冲突
最近几年，大屏幕手机和ipad等移动设备的流行，使你的网页兼容移动设备已成为一种流行！移动设备的屏幕大小是五花八门，各式各样！要想很好的兼容移动设备，Css3的media技术是功不可没。...一、Css3的Media Queries 翻译成中文是“媒体查询”，有如下几种引入方式： 1、直接head中引用，其实media在css2中已经存在，不过，他的主要作用您没有关注，兼容所有媒体等。..." type="text/css" /> 上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率...，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向（...，可以用来排除不支持媒体查询的浏览器。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
