如何进行自适应网页设计?

于 2019-05-31 21:09:19 发布
阅读量681 收藏 6
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 前端零基础 修真院前端小课堂 文章标签： 自适应网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jnshu_it/article/details/85256977
本文介绍了如何进行自适应网页设计，包括设置viewport标签、避免使用绝对宽度、采用流动布局和使用MediaQuery模块。自适应设计旨在确保网页在不同设备上都能良好展示，通过响应屏幕宽度自动调整内容大小，以适应手机和平板等不同终端。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【如何进行自适应网页设计? 】

大家好，我是IT修真院北京总院第24期的学员，一枚正直纯洁善良的web程序员

今天给大家分享一下，修真院官网css任务3，深度思考中的知识点——如何进行自适应网页设计?

1.背景介绍

现在人们通过手机浏览网页占了大多数，随着浏览方式的改变，网页实现多终端自适应，无论对于避免工程师无谓的重复劳动或者是项目管理的便捷性上来说重要性都是十分巨大的。

2.知识剖析

由于移动设备越来越多的被人们使用，手机成为访问互联网的最常见终端，而我们设计的网页确是为了呈现在PC端。

手机的屏幕比较小，宽度通常在600像素以下，而PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。

 

3.常见问题

如何进行自适应网页设计

4.解决方案

1、在HTML头部增加viewport标签。

通俗的讲

最低0.47元/天 解锁文章
博客
IT行业都有哪些职位，初学者如何选择才能够快速进入这个行业？
05-14 2万+
【本人性格不好，被惹到了必然句句带脏字，所以评论中如果有不开眼的，请慎重。另外，这篇回答从头到尾都是我自己的个人偏见，绝对不客观，也绝对不会为本答案负责。所以，有自己正常思维的请不要再看下去了。】互联网行业的薪资水准相对较高，刚入行一个月，半年，或者一年超过其他行业薪资很正常。那么，互联网行业究竟有哪些职位呢，又分别适合哪些传统行业转型？1.产品2.UI3.CSS...
博客
草船云舍AMA分享第八期：深度洞察--AI 重塑工作与创业的无限可能
03-11 709
以自媒体爆款内容生成为例，只需在扣子中输入抖音链接，利用其 link leader 插件就能自动提取文案，接着接入大模型（如 deep seek、kimi 等）进行改写，再通过配置生图、生视频的节点，就能生成视频和封面，实现一键式自动化操作。如今，作为 AI 公司的创始人，她站在行业前沿，以实战经验为基石，分享 AI 应用的宝贵经验。以扣子（COZE）为例，它是字节出品的工具，具有很多字节相关的 API，对抖音的支持非常友好，能直接提取抖音链接里的视频文案，还拥有多样的发布渠道，如豆包、飞书、微信等。
博客
草船云舍AMA分享第七期：投流干货大揭秘-从 0 到 1 学会科学营销
03-10 1023
在投流过程中，要不断学习、实践和优化，结合自身产品和目标客户，制定适合的投流策略。信息流素材竞争激烈，同行相互抄袭，素材生命周期短，最短 2 小时，最长 3 个月，中位数 1 - 2 天。投放短视频素材时，长视频优于短视频，因为长视频能更精准定向人群，提高完播率，吸引真正有购买意向的用户，虽然长视频可能跑量慢，但只要跑动就能赚钱。未来，草船云舍将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。
博客
草船云舍AMA分享第六期：互联网跨界餐饮，困境中蹚出创业之路
03-07 1056
未来，草船云舍将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。再者，重视私域运营，通过加微信、建群等方式，将客户纳入私域流量池，在群内发布产品出锅时间、优惠活动等信息，增强与客户的互动，提高客户粘性。毛总对卤力鸭的未来充满信心，他希望通过充分的市场调研，深入了解市场。卤力鸭的创业历程充满艰辛，从失业后的迷茫，到品牌创立、经营过程中的重重困难，毛总夫妇凭借着坚定的信念和不懈的努力一一克服。
博客
草船云舍AMA分享第五期：探索啤酒世界奇妙之旅
03-05 471
在 2 月 13 日的草船云直播间，一场关于精酿啤酒的精彩分享会火热展开，啤酒文化爱好者阎波（阎总）作为嘉宾，与主持人杨焱一同带领观众走进精酿啤酒的世界，深度探讨了精酿啤酒的知识、文化、市场现状等内容，为观众带来了一场知识与趣味兼具的直播盛宴。活动旨在搭建一个创业者与核心用户、种子用户直接交流的平台，邀请各领域的创业者，尤其是初创团队，分享他们的项目理念、设计思路及目标。草船云舍希望通过AMA系列活动，让用户能够直接向项目创始人提问，增进创业者与用户的深度互动与了解。
博客
草船云舍AMA分享第四期：解锁山海经 AI 手办的奇妙世界
02-26 568
例如，手办的 AI 具备不同声线和人设，能与孩子共同成长，且操作简单，开机即用。线下，通过参加漫展、庙会等活动进行销售和推广，未来还计划采用加盟直营的方式，在儿童聚集的商场、社区等地开设店铺，展示和销售产品。它不仅是一款手办，更是科技与文化融合的创新产品，为儿童陪伴和成长带来了新的可能，让这个充满魅力的 AI 手办陪伴孩子快乐成长。未来，草船云舍将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。
博客
草船云舍AMA分享第三期：用现代学科的角度看传统八字命理
02-26 717
未来，草船云舍将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。草船云舍邀请 大喵 命理学家冯英杰老师，用现代学科的角度解读传统八字命理，为大家深入讲解命理学的基本原理和实际应用，带领我们走进一个充满智慧与启迪的世界。冯老师解释了命与运的区别，以及大运对人生的影响，并指出命好和运好的人生会相对顺遂，而命不好但运好的人生也能取得中上等的成就。一个高水平的命理师能够准确地分析八字，并提供具体的建议。
博客
草船云舍AMA分享第二期：摹图 AI 的创新之旅与未来展望
02-26 858
通过郭总的精彩分享，社区成员们对摹图 AI 有了更深入的了解，也对 AI 技术在电商等行业的应用与发展有了更清晰的认识。同时，摹图AI 还提供了丰富的模板与姿势选择，确保用户能够生成高质量的图片。未来，草船云社将继续举办更多类似的 AMA 活动，邀请更多优秀的创业者与项目团队，与社区成员们共同探讨行业热点话题，分享前沿技术与创新应用，推动各行业的共同发展与进步。在这次活动中，郭总不仅详细介绍了摹图AI 的产品功能、应用领域，还分享了团队的发展历程、未来规划以及 AI 技术在电商等行业的创新应用。
博客
草船云舍分享会第一期：楚笺数字名片的探索与创新
02-11 771
从传统的纸质名片到如今的数字名片，再到未来可能实现的AI名片，这一演变不仅反映了技术的进步，也体现了人们对社交和商务交流需求的不断深化。本次分享使用“草船云”微信视频号语音直播，主讲人北京葡萄藤CEO李亚冲通过2个小时的时间，从自有数字名片“楚笺名片”展开，就”从纸质名片到AI名片” 这一话题展开探讨，既聊到了数字名片的现状，也勾画了数字名片未来的发展方向，并就商业运营模式，区块链、大模型、知识图谱的应用进行了分享。希望通过这个活动，邀请更多的创业者和项目老板来分享他们的项目，促进交流与合作。
博客
什么是无人教学
04-13 794
欢迎来到IT修真院，来了解这种极具开创性和颠覆性的无人教学模式。在无人教学的模式中，并没有老师的角色，而是用一套智能教学的系统来代替“老师授课，学生听课”的方式，是的，我们通过任务分配的方式，让学员在完成任务的过程中主动学习。把被动听课，改成主动学习，仅仅是一个开始，要完善这种学习模式，还需要完善以下的教学体系：1 界定技能边界，确保能达到正式工作的要求2 分解任务，保证所有的任务都来自真实项目3 明确验收标准，来确定任务能否通关4 提供操作步骤，引导学员按步骤完成学习...
博客
Vue 骚技巧，策略模式实现动态表单验证
07-23 1107
策略模式（Strategy Pattern）又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。封装的策略算法一般是独立的，策略模式根据输入来调整采用哪个算法。关键是策略的实现和使用分离。注意：本文可能用到一些编码技巧比如 IIFE（Immediately Invoked Function Expression, 立即调用函数表达式），ES6 的语法 let/const、箭头函数、rest 参数，短路运算符 等，如果还没接触过可以点击链接稍加学习 ~1...
博客
由浅入深，66条JavaScript面试知识点
07-22 1485
钱昱多年前端工作经验 《JavaScript 设计模式精讲》 作者，主要分享前端方面技术博客公众号：前端下午茶HTML&CSS： 浏览器内核 盒模型、flex布局、两/三栏布局、水平/垂直居中； BFC、清除浮动； css3动画、H5新特性。 JavaScript： 继承、原型链、this指向、设计模式、call, apply, bind,； new实现、防抖节流、let, var, const 区别、暂时性死区、eve...
博客
进击的 JAMStack
07-21 772
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站什么是JAMStack概念JAMStack中的JAM其实是三个词的缩写，它们分别是JavaScript, APIs以及Markdown。而Stack用中文的说法就是技术栈（Tech Stack），也就是我们在构建应用的时候具体使用到的技术的集合。举个例子，国外现在比.
博客
Vue.js 组件复用和扩展之道
07-20 905
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站软件编程有一个重要的原则是 D.R.Y（Don't Repeat Yourself），讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展 Vue 组件的最佳方法是什么？Vue 提供了不少 API 和模式来支持组件复用和扩展，你.
博客
深入理解Java的接口和抽象类
07-17 680
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会对于面向对象编程来说，抽象是它的一大特征之一。在Java中，可以通过两种形式来体现OOP的抽象：接口和抽象类。这两者有太多相似的地方，又有太多不同的地方。很多人在初学的时候会以为它们可以随意互换使用，但是实际则不然。今天我们就一起来学习一下Java中的接口和抽象类。一、抽象类　 在了解抽象类之前，先来了解一下抽象方法。抽象方法..
博客
一篇文章了解并发数据结构
07-16 775
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会CopyOnWriteArrayList的内部实现与Vector不同。它是当对象进行写操作时，复制该对象；若进行的是读操作，则直接返回结果，操作过程中不进行同步。CopyOnWriteArrayList很好地利用了对象的不变性，在没有对对象进行写操作前，由于对象未发生改变，因此不必加锁。而在试图改变对象时，总是先获取对象的一个副本，然后对副本.
博客
Java 8 最佳技巧
07-15 638
作者简介：工会10年后端工作经验，主要记录分享：java学习方法、学习心得等。内容包含Java技术、前后端、数据库、编程感悟等干货。公众号：java工会在过去的几年中，我一直使用Java 8 进行了很多的编码工作，用于开发新应用和迁移遗留应用，我觉得是时候写一些有用的”最佳实践”。我个人不喜欢”最佳实践”这个术语，因为它意味着“一刀切”的解决方案，当然编码工作是不会这样的–这是因为我们开发人员会想出适合我们的方案。但我发现我对Java8特别的喜欢，它让我的生活更轻松一点，所以我想就此话..
博客
Java多线程编程基础三（原子性，可见性和有序性）
07-14 653
作者简介：华哥10年+后端开发工作经验，主要分享：关于java体系的知识，如：java基础知识/数据结算/算法，Spring/MyBatis/Netty源码分析，高并发/高性能/分布式/微服务架构的原理，JVM性能优化等。公众号：java杂记在并发编程中，我们通常会遇到以下三个问题：原子性问题，可见性问题，有序性问题。一、原子性即一个操作或者多个操作，要么全部执行并且执行的过程不会被任何因素打断，要么就都不执行。原子性就像数据库里面的事务一样，他们是一个团队，同生共死。...
博客
史上最全的 JavaScript 模块化方案和工具
07-13 739
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站模块化是大型前端项目的必备要素。JavaScript 从诞生至今，出现过各种各样的模块化方案，让我们一起来盘点下吧。IIFE 模块默认情况下，在浏览器宿主环境里定义的变量都是全局变量，如果页面引用了多个这样的 JavaScript 文件，很容易造成命名冲突。/.
博客
10 个很实用的 JavaScript 技巧
07-09 691
作者简介：李中凯八年多工作经验 前端负责人，擅长JavaScript/Vue。掘金文章专栏：https://juejin.im/user/57c7cb8a0a2b58006b1b8666/posts公众号：1024译站编程语言通常暗藏着各种技巧，熟练使用这些技巧可以提高开发效率。JavaScript 就是一门技巧性很强的语言，掌握常见的语法技巧不但可以加深对语言特性的理解，还可以简化代码，提高编码效率。本文分享 10 个常用的技巧，希望能成为你的开发工具箱的一部分。1argument.
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值