响应式网页设计的基石：CSS、HTML、媒体查询、Fluid、Flexbox布局、响应式图像

2023-04-0418:46:53网页制作Comments1,243 views字数 1649阅读模式

CSS和HTML

响应式设计的基础是HTML和CSS的结合，这两种语言可以控制任何给定Web浏览器中页面的内容和布局。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

响应式网页设计的基石：CSS、HTML、媒体查询、Fluid、Flexbox布局、响应式图像文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

HTML与CSS（图片来源：codingdojo.com）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

HTML主要控制网页的结构、元素和内容。例如，要将图像添加到网站，您必须使用如下HTML代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

<img src="image.gif" alt="image" class=”full-width-img”>

您可以设置一个“class”或“id”，以后可以使用CSS代码作为目标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

您还可以控制HTML中的主要属性，例如高度和宽度，但这不再被视为最佳实践。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

相反，CSS用于编辑包含在HTML页面上的元素的设计和布局。CSS代码可以包含在HTML文档的<style>部分中，或者作为单独的样式表文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

例如，我们可以像这样在元素级别编辑所有HTML图像的宽度：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

img {
width: 100%;
}

或者我们可以通过在前面添加一个句点来定位特定的类“full-width-img”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

.full-width-img {
width: 100%;
}

除了高度、宽度和颜色之外，您还可以控制设计。当您将CSS与一种称为媒体查询的技术结合使用时，像这样使用CSS可以使设计具有响应性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

媒体查询

媒体查询是CSS3的基本部分，它允许您渲染内容以适应不同的因素，例如屏幕尺寸或分辨率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

响应式网页设计的基石：CSS、HTML、媒体查询、Fluid、Flexbox布局、响应式图像文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

台式机、平板电脑、智能手机的媒体查询文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

它的工作方式与某些编程语言中的“if clause”类似，主要是在执行适当的代码之前检查屏幕的viewport是否足够宽或太宽。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}

如果屏幕至少有780像素宽，“full-width-img”类图像将占据屏幕的90%，并自动以同样宽的边距居中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

Fluid布局

Fluid布局是现代响应式设计的重要组成部分。在过去的好日子里，你会为每个HTML元素设置一个静态值，比如600像素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

相反，Fluid布局依赖于动态值，例如viewport宽度的百分比。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

响应式网页设计的基石：CSS、HTML、媒体查询、Fluid、Flexbox布局、响应式图像文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

Fluid布局示例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

这种方法将根据屏幕大小动态增加或减少不同的容器元素大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

Flexbox布局

虽然基于百分比的布局是流动的，但许多设计师和Web开发人员认为它不够动态或不够灵活。Flexbox是一个CSS模块，被设计为一种更有效的方式来布局多个元素，即使容器内的内容大小未知。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

弹性容器扩展项目以填充可用的可用空间或缩小它们以防止溢出。这些flex容器具有许多独特的属性，例如justify-content，您无法使用常规HTML元素对其进行编辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

响应式网页设计的基石：CSS、HTML、媒体查询、Fluid、Flexbox布局、响应式图像文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

Flexbox容器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

这是一个复杂的话题，所以如果你想在你的设计中使用它，你应该阅读CSS Tricks的flexbox指南。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

响应式图像

响应式图像最基本的迭代遵循与流体布局相同的概念，使用动态单位来控制宽度或高度。我们之前介绍的示例CSS代码已经完成了这一点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

img {
width: 100%;
}

%单位近似于viewport宽度或高度的单个百分比，并确保图像与屏幕保持成比例。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

这种方法的问题是每个用户都必须下载完整尺寸的图像，即使在移动设备上也是如此。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

要提供针对不同设备缩放的不同版本，您需要在img标签中使用HTML属性srcset，以指定多个可供选择的图像尺寸。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

<img
src="small.jpg"
/>

WordPress自动将此功能用于帖子或页面中包含的图像。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

速度

当您尝试为您的网站创建响应式设计时，加载速度应该是重中之重。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

在2秒内加载的页面的平均跳出率是9%，而需要5秒的页面会导致38%的跳出率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

您的响应方法不能阻止或延迟您的页面的第一次渲染超过它需要的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

有几种方法可以使您的页面更快。优化图像、实现缓存、缩小、使用更高效的CSS布局、避免渲染阻塞JS以及改进关键渲染路径都是您应该考虑的好主意。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

您也可以尝试为您的移动页面实施Google AMP，但在我们的Google AMP案例研究中，我们的移动潜在客户下降了高达59%。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/32895.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/zhizuo/32895.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定