响应式图像 响应视图大小： HTML5新增picture标签和img标签中的srcset、sizes属性 picture标签作为容器，可以包含一个或多个source标签，其中source可以加载多媒体源.../02.png 2px”） media：设置媒体查询，madia = “（min-width ：320px）”； sizes: 设置宽度，如sizes =“100vw”，也可以通过媒体查询设置，如sizes...= “（min-width ：320px）100vw，（min-width ：640px）50vw”，sizes里面的媒体查询只对w描述符起作用，即如果srcset里面采用的是x描述符，或者根本没有设置...srcset属性，那么sizes完全不起作用； type：设置MIME属性 以下是我上网查询之后对媒体查询的理解 媒体查询是向浏览器做出询问，通过对浏览器做出的改变来实现已知的样式或效果。...这里的理解是源于这篇文章，请参考前端中媒体查询 音频、视频 在h5中新增了音频audio标签和视频video标签，通过这两个标签，我们可以实现将音频和视频放置在网页上的操作 audio标签 （audio
vw 的值是根据什么计算的 1px 显示问题 如何适配刘海屏 回答关键点 viewport 相对单位 媒体查询 响应式图片 移动端开发的主要痛点是如何让页面适配各种不同的终端设备，使不同的终端设备都拥有基本一致的视觉效果和交互体验...如果不进行 viewport 元标签的设置，可能会导致开发者设定的较小宽度的媒体查询永远不会被使用，因为默认的布局视口宽度为 980px。
简介 根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。 视口单位为：vw，vh，vmin和vmax。 vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。...体大小变得非常小，这不利于可访问性和用户体验。据我所知，移动设备上的最小字体大小不应该不于14px。在GIF中，不小于10px。...为了防止这种情况，我们应该在某些断点上使用媒体查询并更改字体大小。...您可能还需要添加多个媒体查询，但这取决于你自己，也取决于项目的上下文。 事例地址：https://codepen.io/shadeed/pe......，也用于border，border-radius和其他属性。
FlexBox 基于轴线，只能解决一维场景下的布局，作为补充，W3C 在后续提出了网格布局（CSS Grid Layout），网格将容器再度划分为 “行” 和 “列”，产生单元格，项目（子元素）可以在单元格内组合定位...UI 库对 Grid 的实现中，通常会使用到媒体查询，这也是响应式布局的核心技术。...媒体查询 媒体查询（Media Query）是 CSS3 规范中的一部分，媒体查询提供了简单的判断方法，允许开发者根据不同的设备特征应用不同的样式。...srcset 支持定义几组图片和对应的尺寸 sizes 支持一组媒体查询条件 <!...，vh等），布局方案（FlexBox，Gird）以及媒体查询等技术，其中不乏很多前辈们的最佳实践，作为开发者我们应该用这些经验，以更好地优化不同尺寸大小设备的用户体验。
移动端页面需要具备响应式设计，以适应不同大小和分辨率的移动设备屏幕。使用流体网格布局、弹性图片和媒体查询等技术，确保页面在各种设备上都能良好显示。...如果项目只有一根轴线，该属性不起作用。...媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定 CSS 样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。...媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。...媒体查询与弹性和布局的使用情况：媒体查询：当页面的结构发生变化的话最好使用媒体查询。弹性盒子：如果只是宽高的变化，尽量使用弹性盒。
简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。...px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。...二、媒体查询 在前面我们说到，不同端的设备下，在css文件中，1px所表示的物理像素的大小是不同的，因此通过一套样式，是无法实现各端的自适应。...使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。...比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。 但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
先知道一下viewport的四个单位，vw、vh、vmax、vmin： vw:1vw 等于视口宽度的1% vh:1vh 等于视口高度的1% vmin: 选取 vw 和 vh 中最小的那个 vmax:选取...vw 和 vh 中最大的那个 这边需要注意的是，vw是视口宽度，是连滚动条都算在内的： <div style="width: 100<em>vw</em>;height: 20vh;background: #9dff00...取的是<em>vw</em><em>和</em>vh最大最小计算。 先使用rem，之前用的是淘宝的flexible.js，会帮你动态的根据屏幕<em>大小</em>计算html的font-size。...，75px就是10<em>vw</em>，所以只需要设置： html{ font-size: 10<em>vw</em>; } 再用<em>媒体</em><em>查询</em>设置一下最大值： @media (min-width: 540px) { html {...还能配置不转换之类的： https://github.com/evrone/postcss-px-to-viewport/blob/HEAD/README_CN.md 没怎么用过，不过刚用就发现行内样式<em>不起作用</em>
记录一下flex布局和移动适配的一些知识。 Flex布局原理 Flex布局原理就是：给父盒子添加flex属性，来控制子盒子的位置排列方式从而实现flex布局。...当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和vertical-align 属性将失效。 Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局。...flex-direction 改变元素排列方向 row 改成x 默认值 column 改成y 移动适配 移动适配使用的两种类型的单位，rem和vw/vh。...rem 是一个相对单位，1rem为1html字号大小 rem使用 使用媒体查询设置差异化CSS样式 @media (媒体查询) { 选择器 { 属性...1/100 自动计算不需要在引入额外js，不过又移动兼容性问题 设计稿一般是375px，1vw就是3.75px flexible 移动设备视口宽度很多，我们不能一个一个使用媒体查询，我们使用flexible
这就是sizes属性的用途。 sizes属性允许您定义图像的单个尺寸，例如50vw，或者一组媒体查询，用于确定图像应该使用的尺寸。...sizes属性接受一个以逗号分隔的媒体查询和尺寸列表。为了理解其中的内容，让我们逐个解析列表中的每个项。 我们的第一个项（max-width: 800px）100vw 有两个部分。...潜在的陷阱 sizes属性非常强大，但在使用它时需要注意以下几点。 顺序很重要 如果您的sizes属性中有多个媒体查询，将选择第一个为true的媒体查询对应的图像。这意味着您的媒体查询的顺序很重要。...这意味着第二个媒体查询（max-width: 500px）50vw 将永远不会被使用，因为只有在屏幕小于500像素时才为真，而在这些尺寸范围内第一个媒体查询将始终为真，因此它将始终被优先选择。...它的工作方式类似于sizes属性中的媒体查询，但是在source元素的media属性中，您只能定义一个媒体查询。这些查询与sizes属性一样，从上到下逐个检查，只有第一个匹配的媒体查询会被使用。
媒体查询 使用媒体查询设置差异化CSS样式，媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，当某个条件成立, 执行对应的CSS样式。...作用：可以使用媒体查询, 根据不同的视口宽度, 设置不同的根字号。...变量：存储数据，方便使用和修改。 1.定义变量：@变量名:值; 2.使用变量：css属性:@变量名; 导入：引用其他less文件 @import '文件路径'; 如果是less文件，可以省略后缀。...单位的尺寸=px单位数值/（1/100视口宽度） 注：在开发中，vw和 vh不会混用，因为 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。...---- rem是目前多数企业在用的解决方案，但需要不断修改html文字大小，需要媒体查询media，需要flexible.js，而vw/vh是未来的解决方案，省去各种判断和修改。
响应式布局可以让网站同时适配不同分辨率和不同的手机端，让客户有更好的体验。...由于没办法对 font-size 进行百分比设置，所以用的最多就是对图片和大块布局进行百分比设置。...方案二：使用媒体查询 (CSS3 @media 查询) 利用媒体查询设置不同分辨率下的css 样式，来适配不同屏幕，先看一个简单例子： 三个不同分辨率下显示对应的背景色。...媒体查询相对于百分比布局，可以对布局进行更细致的调整，但需要在每个分辨率下面都写一套 css 样式；分辨率拆分可视项目具体情况而定。 注意：IE6、7、8 不支持媒体查询。...第二种利用 js 动态计算赋值，详细代码如下图： 缺点就是打开页面时候，元素大小会有一个变化过程。
响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容； 响应式布局的 5 种实现方案 百分比布局 媒体查询布局 rem 响应式布局 vw 响应式布局 flex 弹性布局...但是 padding、border、margin 等属性的情况又不一样 1、子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的...二、媒体查询布局 通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。 响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。...四、vw、vh 响应式布局 vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。...的大小为主） 代码全部开发好后，我们再利用 vscode 的插件 px to vw 来实现单位的自动转换。
从之前的文章：CSS 计算属性 calc()的完整指南(一），我们可以学习到几个方面： calc() 只作用于属性值 calc() 用于长度和其他数值 不能在媒体查询中使用 混合单位 与预处理器数学比较...我本来猜测空格应该是和自定义属性的--语法有关，但没有! 乘法和除法不需要运算符周围的空格。但我认为好的一般建议是，为了其他运算符的可读性和肌肉记忆，应该包括这些空格。 外围的空白并不重要。...IE 9 - 11和Edge都不支持表格单元格上的width: calc()。...我用它来设置一些流体字体/动态排版......根据最小值、最大值和视口单位的变化率来计算字体大小。不仅仅是字体大小，还有行高。...其他技巧 一个两层网格，可以分成一列，而无需媒体查询 一个纵横比的头部组件 增强高对比度的颜色 帮助解决基于百分比的剪辑路径的坐标问题 以上就是这篇文章的全部内容了，读下来收获很大，没想到calc()属性还有这么多限制和作用的
CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂） 目录 响应式布局的方法 媒体查询... 使用方法 优点 缺点 弹性布局flex ---- 响应式布局的方法 媒体查询...media 使用方法 使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小...优点 与百分比布局很相似，但是更好用，不同属性的vh，vw效果都是一样的，都是当前窗口的宽度高度的一份儿，可以直接设置全满的高度（100vh），这是百分比做不到的，也可以用于设置字体大小。 ...，， 父元素设置为32px，子元素设置为1em，那么结果就是32px（父元素修改成了32px）， 宽高设置也是如此，但还是有些属性不同，比如内边距 设置成1em，他是根据最近的字体大小为依据的，他不用必须是父级
最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。...它和响应式布局不一样，响应式布局强调不同屏幕要有不同的显示，比如媒体查询。...字体并不合适使用rem, 字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem；由于设置了根元素字体的大小，会影响所有没有设置字体大小的元素，因为字体大小是会继承的，难道要每个元素都显示设置字体大小...我们可以用媒体查询和em来实现： @media screen and (min-width: 320px) { body {font-size: 16px} } @media screen and...只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。
视觉视口不会影响布局视口的宽度和高度。 固定大小——跟屏幕大小相同，在上面。 layout viewport（布局视口）：布局视口定义了pc网页在移动端的默认布局行为。...现代网页需要将layout viewport设置成跟visual viewport等同大小，方便进行网页制作。 2、媒体查询 @media 可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。...: 960px; } } @media all and ( min-width : 1200px ){ .container{ max-width : 1140px; } } 复制代码 媒体查询的缺点也很明显...3、rem/ vh和vw / 流式布局 （2）rem布局——等比缩放布局（网易新闻） em : 是一个相对单位，1em等于当前元素或父元素的font-size值。 ...rem 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
使用 @media媒体查询来切换多个布局 4. 响应式布局 通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用 5. 弹性布局 通常指的是rem或em布局。...或者使用媒体查询来设置根元素字体大小 @media screen and (min-width: 320px) { html,body,button,input,select,textarea...在css中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询... : 1vw 等于视窗宽度的1% vh : 1vh 等于视窗高度的1% vmin : 选取 vw 和 vh 中最小的那个 vmax : 选取 vw 和 vh 中最大的那个 ?...，视窗未缩放 而在页面标签（html和body）中，简单地配上属性代表是否需要限制宽度即可。
sizes属性的值是一个逗号分隔的字符串，除了最后一部分，前面每个部分都是一个放在括号里面的媒体查询表达式，后面是一个空格，再加上图像的显示宽度。...假定当前设备的屏幕宽度是480px，浏览器从sizes属性查询得到，图片的显示宽度是33vw（即33%），等于160px。...四、标签，标签 上面两节分别解决了像素密度和屏幕大小的适配，但是如果要同时适配不同像素密度、不同大小的屏幕，应该怎么办呢？ 这时，就要用到标签。...标签的media属性给出媒体查询表达式，srcset属性就是标签的srcset属性，给出加载的图像文件。...浏览器按照标签出现的顺序，依次判断当前设备是否满足media属性的媒体查询表达式，如果满足就加载srcset属性指定的图片文件，并且不再执行后面的标签和标签。
在探讨移动端适配前我们先要了解下面几个概念 像素 分辨率 物理像素 CSS像素 像素 像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。...通过查看视口的大小就可以得出 CSS像素与物理像素的比值关系 如上图视口宽度为 1280 而我们的分辨率，物理像素也是 1280 此时在浏览器窗口未发生改变和缩放时，CSS像素与物理像素的比值是...我们可以通过改变视口的大小来改变CSS像素和物理像素的比值 如Iphone6 的物理像素是750px这个是固定的，我们要调整像素比，只需将视口调小就可以了如 375，此时正好是1：2 通过meta设置视口大小...maximum-scale：最大缩放比 minimum-scale：最小缩放比 user-scalable 用户是否可以缩放 移动端布局适配解决方案 rem+flexible rem+css预处理+媒体查询与...，达到不好的用户体验，这里我们可以通过rem的特性解决无限拉伸的问题 1.给body规定最大与最小宽度 2.使用媒体查询限制html字体大小的值 另一种实现方式 这里我在网上找到了另一种办法，可以解决上述方法的尴尬处境
等属性，它们都依赖于父组件的宽度和高度（margin 和 padding 都可以使用百分比值的形式，但这与通常的想法有点不同，不同之处在于 margin-top, margin-bottom, padding-top...如果我们要根据设计草案定义元素的宽度和高度，必须将其转换为百分比单位。 4.2 媒体查询布局 使用 @media 媒体查询，我们可以针对不同的屏幕尺寸编写不同的样式，从而实现响应式布局。...例如，现在有 5 个大小相同的屏幕（750 640 480 375 320），所有屏幕的总宽度被划分为 10rem. 然后，我们需要获取与这些不同屏幕相对应的 html 根元素的字体大小。...flexible.js 插件还可以解决以下问题 em 和 rem 与之类似，它们都根据 font-size 来缩放页面布局，但 em 主要取决于直接父级标签 font-size 的大小，并且只会查找最近的父级标签...4.4 VW、VH 响应式布局 因为 100vw = 100 视图窗口宽度，100vh = 100 视图窗口高度，那么根据 750 的设计草案，100vw 就是 750。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
