专业开发网站建设哪家好,网站建设流程有几个阶段,保定建设招聘信息网站,重庆网站seo建设哪家好除了使用媒体查询和现代css布局(如flexbox和grid)来创建响应式网站外#xff0c;我们还可以做好某些被忽视的事情来制作响应式网站。在本文中#xff0c;我们将探讨许多可用的工具(围绕html和css)#xff0c;从响应图像到相对较新的CSS函数#xff0c;无论我们是否使用媒体… 除了使用媒体查询和现代css布局(如flexbox和grid)来创建响应式网站外我们还可以做好某些被忽视的事情来制作响应式网站。在本文中我们将探讨许多可用的工具(围绕html和css)从响应图像到相对较新的CSS函数无论我们是否使用媒体查询它们都可以正常工作。事实上媒体查询与这些功能一起使用时更多的是成为一种补充而不是完整的方法。让我们来看看是如何运作的。真正的响应式图像还记得当我们可以在图片上写死 width: 100% 然后就可以下班了吗当然这样做还是有效果的也确实能让图片变得更有弹性但也会带来一些弊端其中最明显的包括图像可能会变形到失去焦点的程度。较小的设备仍会下载完整尺寸的图像。在网络上使用图像时我们必须确保在分辨率和尺寸方面进行了优化。原因是为了确保我们有合适的图像分辨率以适应合适的设备所以我们不会最终为较小的屏幕下载非常大和沉重的图像这可能会降低网站的性能。简单来说我们要确保较大的、高分辨率的图像被发送到大屏幕上而较小的、低分辨率的变化被发送到小屏幕上从而提高性能和用户体验。html提供了 元素该元素使我们可以根据所添加的媒体查询来指定要呈现的确切图像资源。如前所述我们没有将一个图像(通常是一个大的、高分辨率的版本)发送到所有屏幕大小并将其缩放到视口宽度而是指定一组用于特定情况的图像。picture source media(max-width:1000px) srcsetpicture-lg.png source media(max-width:600px) srcsetpicture-mid.png source media(max-width:400px) srcsetpicture-sm.png img srcpicture.png altpicturepicture在此示例中picture.png 是全尺寸图像。从那里我们定义了图片的下一个最大版本picture-lg.png大小依次减少直到最小的版本 picture-sm.png。请注意我们在这种方法中仍然使用媒体查询但驱动响应行为的是 元素本身而不是在CSS中定义断点。媒体查询已适当添加以随图片大小缩放大于等于1000px的视口将获得 picture.png。介于601像素和999像素之间的视口将获得 picture-lg.png。介于401像素和600像素之间的视口将获得 picture-sm.png。任何小于400px的东西都会得到 picture-sm.png。有趣的是我们还可以在URL后按图像密度给每张图片贴上标签——1x、2x、3x等等。如果我们把不同的图片按比例制作好了就可以了这样浏览器就可以根据屏幕的像素密度以及视口大小来决定下载哪个版本。但是请注意我们最终定义了多少个图像picture source media(max-width:1000px) srcsetpicture-lg_1x.png 1x, picture-lg_2x.png 2x, picture-lg_3x.png 3x source media(max-width:600px) srcsetpicture-mid_1x.png 1x, picture-mid_2x.png 2x, picture-mid_3x.png 3x source media(max-width:400px) srcsetpicture-small_1x.png 1x, picture-small_2x.png 2x, picture-small_1x.png 3x img srcpicture.png altpicturepicture让我们专门看一下嵌套在 元素内的两个标签 和 。浏览器将查找媒体查询与当前视口宽度匹配的第一个 元素然后将显示正确的图像(在 srcset 属性中指定)。 元素是 元素的最后一个子元素如果没有原始源标签匹配则作为后备选项。我们还可以使用图像密度通过 srcset 属性仅使用 元素来处理响应图像img srcset flower4x.png 4x, flower3x.png 3x, flower2x.png 2x, flower1x.png 1x srcflower-fallback.jpg我们可以做的另一件事是在CSS中根据设备本身的屏幕分辨率(通常以dots per inch或dpi为单位)而不仅仅是设备视口来编写媒体查询。这意味着代替media only screen and (max-width: 600px) { /* Style stuff */}我们现在有media only screen and (min-resolution: 192dpi) { /* Style stuff */}这种方法让我们可以根据设备本身的屏幕分辨率来决定渲染什么图像这在处理高分辨率图像时可能会有帮助。基本上这意味着我们可以为支持更高分辨率的屏幕显示高质量的图片并以较低的分辨率显示较小的版本。值得注意的是虽然移动设备的屏幕很小但它们的分辨率通常很高。这意味着在决定渲染哪张图片时仅仅依靠分辨率可能不是最好的主意。这可能导致在非常小的屏幕上显示大的、高分辨率的图像这可能不是我们真正想要在如此小的屏幕上显示的版本。body { background-image : picture-md.png; /* the default image */}media only screen and (min-resolution: 192dpi) { body { background-image : picture-lg.png; /* higher resolution */ }}给我们提供的基本上是对图像进行艺术指导的能力。而且根据这个想法我们可以利用CSS的特性比如 object-fit 属性当与 object-position 一起使用时我们可以裁剪图像以获得更好的焦点同时保持图像的纵横比。因此要更改图像的焦点media only screen and (min-resolution: 192dpi) { body { background-image : picture-lg.png; object-fit: cover; object-position: 100% 150%; /* moves focus toward the middle-right */ }}在CSS中设置minimum和maximummin() 函数指定一个元素可以缩小到的绝对最小尺寸。这个函数在帮助文本大小在不同屏幕大小之间适当缩放方面非常有用比如永远不要让流体类型下降到一个清晰的字体大小以下html { font-size: min(1rem, 22px); /* Stays between 16px and 22px */}min() 接受两个值它们可以是相对、百分比或固定单位。在这个例子中我们告诉浏览器永远不要让带有 .box 类的元素宽度低于45%或600px以视口宽度最小的为准。.box { width : min(45%, 600px)}如果45计算得出的值小于600px则浏览器将使用45作为宽度。反之如果45%的计算值大于600px那么元素的宽度将使用600px。max() 函数也是同样的道理它也接受两个值但不是指定一个元素的最小尺寸而是定义它的最大尺寸。.box { width : max(60%, 600px)}如果60%计算出的数值大于600px浏览器就会使用60%作为宽度。反过来说如果60%的计算值小于600px那么将使用600px作为元素的宽度。钳制(Clamping)值我们中的许多人已经为clip()叫嚣了一段时间实际上我们在所有现代浏览器中都得到了广泛的支持(对不起IE)。clamp() 是 min() 和 max() 函数的组合接受三个参数最小值首选值以及最大值例如.box { font-size : clamp(1rem, 40px, 4rem)}浏览器会将字体设置为1rem直到1rem的计算值大于40px。而当计算值大于40px时是的浏览器在达到4rem后将停止增加大小。你可以看到如何使用 clip() 来使元素变得流畅而无需使用媒体查询。与响应单位合作你是否曾经建立过一个大标题或小标题的页面并羡慕它在桌面屏幕上看起来有多好但在移动设备上检查时却发现它太大了我肯定会遇到这种情况在本节中我将解释如何处理此类问题。在CSS中你可以使用各种度量单位来确定元素的大小或长度最常用的度量单位包括pxemremvw 和 vh。虽然还有一些不常用的单位。我们感兴趣的是px 可以认为是一个绝对单位而其余的则认为是相对单位。绝对单位像素(px)被视为绝对单位主要是因为像素是固定的并且不会因其他任何元素的测量而变化。可以将其视为其他一些相对单位使用的基本单位或根单位。试图使用像素来进行响应行为可能会碰到问题因为它是固定的但如果你有一些根本不应该调整大小的元素它们是很好的。相对单位相对单位如 %、em 和 rem更适合响应式设计主要是因为它们能够跨越不同的屏幕尺寸进行缩放。vw相对于视口的宽度vh相对于视口的高度rem相对于根()元素(默认字体大小通常为16px)em相对于父元素相对于父元素同样大多数浏览器的默认字体大小是 16px rem 单位使用它来生成计算值。所以如果用户在浏览器上调整字体大小页面上的所有内容都会根据根部大小正确缩放。例如当处理一个根为 16px 时你指定的数字将乘以该数字乘以默认大小。例如.8rem 12.8px (.8 * 16)1rem 16px (1 * 16)2rem 32px (2 * 16)如果你或用户更改默认大小怎么办我们已经说过这些都是相对单位最终的尺寸值将以新的基本尺寸为基础。这在媒体查询中很有用你只需改变字体大小整个页面就会相应地放大或缩小。例如如果你在CSS中把字体大小改为10px那么计算出来的大小就会变成。html { font-size : 10px;}1rem 10px (1 * 10)2rem 20px (2 * 10).5rem 5px (.5 * 10)注意这也适用于百分比 。例如100% 16px;200% 32px; 50% 8px;rem 和 em 单位有什么区别rem 使用根元素()的字体大小来计算值而声明 em 值的元素则引用包含它的父元素的字体大小。如果指定的父元素和根元素的大小不同(例如父元素是18px但根元素是16px)那么em和rem将解析为不同的计算值。这让我们可以更精细地控制我们的元素在不同的响应环境中的响应方式。vh 是视口高度的首字母缩写也就是可视屏幕的高度100vh代表视口高度的100%(取决于设备)。同理vw 代表视口宽度意为设备的可视屏幕宽度100vw字面意思是代表100%的视口宽度。超越媒体查询看到了吗我们刚刚看了一些非常强大且相对较新的 HTML 和 CSS 功能它们为我们提供了额外的(可能更有效的)构建响应性的方法。这并不是说这些新技术取代了我们一直在做的事情。它们只是我们开发者工具带中的更多工具让我们有更大的控制权来决定元素在不同上下文中的行为。无论是对字体大小、分辨率、宽度、焦点还是任何事物的处理我们对用户体验的控制都比以往更加精细。所以下次当你发现自己在一个项目上工作时你希望在特定设备上对设计的确切外观和感觉有更多的控制看看原生HTML和CSS能帮上什么忙——事情已经发展到令人难以置信的地步了。本文完~
