fuck-coding/zi-gua-ying.html at main · yoru-hiru/fuck-coding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>自适应 - 全栈艺术</title><meta name="description" content="方式 说明 优点 缺点 定宽 基于屏幕主流尺寸，确定一个安全宽度，并进行整体居中 屏幕尺寸大于安全宽度时，会产生留白；屏幕尺寸小于安全宽度时，将局部显示，并产生横向滚动条。这意味着只有在特定尺寸下，才能有最佳效果 流动 独立站点 可拥有最佳显示效果 需要维护多个单独的代码库和设计 自适应 媒体查询+定宽 响应式 媒体查询+流动 媒体查询 宏布局 微布局 主题 媒体功能 屏幕配置 文本在较大尺寸时，可变为多列，防止文本行过长 无障碍 交互 界面模式"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="canonical" href="https://yoru-hiru.github.io/fuck-coding/zi-gua-ying.html"><link rel="alternate" type="application/atom+xml" href="https://yoru-hiru.github.io/fuck-coding/feed.xml"><link rel="alternate" type="application/json" href="https://yoru-hiru.github.io/fuck-coding/feed.json"><meta property="og:title" content="自适应"><meta property="og:site_name" content="全栈艺术"><meta property="og:description" content="方式 说明 优点 缺点 定宽 基于屏幕主流尺寸，确定一个安全宽度，并进行整体居中 屏幕尺寸大于安全宽度时，会产生留白；屏幕尺寸小于安全宽度时，将局部显示，并产生横向滚动条。这意味着只有在特定尺寸下，才能有最佳效果 流动 独立站点 可拥有最佳显示效果 需要维护多个单独的代码库和设计 自适应 媒体查询+定宽 响应式 媒体查询+流动 媒体查询 宏布局 微布局 主题 媒体功能 屏幕配置 文本在较大尺寸时，可变为多列，防止文本行过长 无障碍 交互 界面模式"><meta property="og:url" content="https://yoru-hiru.github.io/fuck-coding/zi-gua-ying.html"><meta property="og:type" content="article"><link rel="preload" href="https://yoru-hiru.github.io/fuck-coding/assets/dynamic/fonts/jetbrainsmono/jetbrainsmono.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="https://yoru-hiru.github.io/fuck-coding/assets/css/style.css?v=0643aeb33172d8efe1d48cf7f23a4fbe"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://yoru-hiru.github.io/fuck-coding/zi-gua-ying.html"},"headline":"自适应","datePublished":"2024-09-04T16:47+08:00","dateModified":"2024-09-07T19:11+08:00","description":"方式 说明 优点 缺点 定宽 基于屏幕主流尺寸，确定一个安全宽度，并进行整体居中 屏幕尺寸大于安全宽度时，会产生留白；屏幕尺寸小于安全宽度时，将局部显示，并产生横向滚动条。这意味着只有在特定尺寸下，才能有最佳效果 流动 独立站点 可拥有最佳显示效果 需要维护多个单独的代码库和设计 自适应 媒体查询+定宽 响应式 媒体查询+流动 媒体查询 宏布局 微布局 主题 媒体功能 屏幕配置 文本在较大尺寸时，可变为多列，防止文本行过长 无障碍 交互 界面模式","author":{"@type":"Person","name":"Yoruhiru","url":"https://yoru-hiru.github.io/fuck-coding/authors/yoru/"},"publisher":{"@type":"Organization","name":"Yoruhiru"}}</script><noscript><style>img[loading] {
                    opacity: 1;
                }</style></noscript></head><body><div class="container container--center"><header class="header"><div class="header__logo"><a class="logo" href="https://yoru-hiru.github.io/fuck-coding/">全栈艺术</a></div><nav class="navbar js-navbar"><button class="navbar__toggle js-toggle" aria-label="Menu" aria-haspopup="true" aria-expanded="false"><span class="navbar__toggle-box"><span class="navbar__toggle-inner">Menu</span></span></button><ul class="navbar__menu"><li class="has-submenu"><a href="https://yoru-hiru.github.io/fuck-coding/chan-pin.html" target="_self" aria-haspopup="true">产品</a><ul class="navbar__submenu level-2" aria-hidden="true"><li><span class="is-separator">立项</span></li><li><span class="is-separator">规划</span></li><li><span class="is-separator">协作</span></li></ul></li><li class="has-submenu"><span class="is-separator" aria-haspopup="true">设计</span><ul class="navbar__submenu level-2" aria-hidden="true"><li><a href="https://yoru-hiru.github.io/fuck-coding/yong-hu-ti-yan.html" target="_self">体验</a></li><li class="has-submenu"><span class="is-separator" aria-haspopup="true">系统</span><ul class="navbar__submenu level-3" aria-hidden="true"><li><a href="https://yoru-hiru.github.io/fuck-coding/jie-mian.html" target="_self">语言</a></li><li><a href="https://yoru-hiru.github.io/fuck-coding/she-ji-token.html" target="_self">变量</a></li><li><a href="https://yoru-hiru.github.io/fuck-coding/she-ji-zu-jian.html" target="_self">维护</a></li></ul></li><li class="has-submenu"><span class="is-separator" aria-haspopup="true">界面</span><ul class="navbar__submenu level-3" aria-hidden="true"><li><span class="is-separator">线框</span></li><li><span class="is-separator">原型</span></li><li><span class="is-separator">视觉</span></li></ul></li></ul></li><li class="has-submenu"><span class="is-separator" aria-haspopup="true">技术</span><ul class="navbar__submenu level-2" aria-hidden="true"><li class="has-submenu"><span class="is-separator" aria-haspopup="true">架构</span><ul class="navbar__submenu level-3" aria-hidden="true"><li><a href="https://yoru-hiru.github.io/fuck-coding/jia-gou-jue-ce.html" target="_self">决策</a></li><li><a href="https://yoru-hiru.github.io/fuck-coding/jia-gou-mo-shi.html" target="_self">模式</a></li><li><a href="https://yoru-hiru.github.io/fuck-coding/dai-ma.html" target="_self">代码</a></li></ul></li><li class="has-submenu"><span class="is-separator" aria-haspopup="true">开发</span><ul class="navbar__submenu level-3" aria-hidden="true"><li><a href="https://yoru-hiru.github.io/fuck-coding/ji-chu.html" target="_self">基础</a></li><li><a href="https://yoru-hiru.github.io/fuck-coding/dai-ma.html" target="_self">编程</a></li><li><a href="https://yoru-hiru.github.io/fuck-coding/ce-shi.html" target="_self">审查</a></li></ul></li><li><span class="is-separator">运维</span></li></ul></li><li class="has-submenu"><span class="is-separator" aria-haspopup="true">运营</span><ul class="navbar__submenu level-2" aria-hidden="true"><li class="has-submenu"><span class="is-separator" aria-haspopup="true">方面</span><ul class="navbar__submenu level-3" aria-hidden="true"><li><span class="is-separator">内容</span></li><li><span class="is-separator">用户</span></li><li><span class="is-separator">活动</span></li></ul></li><li class="has-submenu"><span class="is-separator" aria-haspopup="true">模式</span><ul class="navbar__submenu level-3" aria-hidden="true"><li><span class="is-separator">商业</span></li><li><span class="is-separator">推广</span></li></ul></li><li><span class="is-separator">分析</span></li></ul></li></ul></nav></header><main class="content"><article class="post"><header><h1 class="post__title">自适应</h1><div class="post__meta"><time datetime="2024-09-04T16:47" class="post__date">九月 4, 2024 </time><span class="post__author"><a href="https://yoru-hiru.github.io/fuck-coding/authors/yoru/" class="feed__author">Yoruhiru</a></span></div></header><div class="post__entry"><div class="post__toc"><h3>目录</h3><ul><li><a href="#mcetoc_1i70r7rqbhp">元素自适应</a><ul><li><a href="#mcetoc_1i70r7rqbhq">排版</a><ul><li><a href="#mcetoc_1i70r99o1hu">国际化</a></li></ul></li><li><a href="#mcetoc_1i70r7rqbhr">图像</a></li><li><a href="#mcetoc_1i70r7rqbhs">图标</a></li></ul></li></ul></div><table style="border-collapse: collapse; width: 100%;" border="1"><tbody><tr><td style="width: 50.0475%;">方式</td><td style="width: 12.5475%;">说明</td><td style="width: 12.5475%;">优点</td><td style="width: 24.9525%;">缺点</td></tr><tr><td style="width: 50.0475%;">定宽</td><td style="width: 12.5475%;">基于屏幕主流尺寸，确定一个安全宽度，并进行整体居中</td><td style="width: 12.5475%;"> </td><td style="width: 24.9525%;">屏幕尺寸大于安全宽度时，会产生留白；屏幕尺寸小于安全宽度时，将局部显示，并产生横向滚动条。这意味着只有在特定尺寸下，才能有最佳效果</td></tr><tr><td style="width: 50.0475%;">流动</td><td style="width: 12.5475%;"> </td><td style="width: 12.5475%;"> </td><td style="width: 24.9525%;"> </td></tr><tr><td style="width: 50.0475%;">独立站点</td><td style="width: 12.5475%;"> </td><td style="width: 12.5475%;">可拥有最佳显示效果</td><td style="width: 24.9525%;">需要维护多个单独的代码库和设计</td></tr><tr><td style="width: 50.0475%;">自适应</td><td style="width: 12.5475%;">媒体查询+定宽</td><td style="width: 12.5475%;"> </td><td style="width: 24.9525%;"> </td></tr><tr><td style="width: 50.0475%;">响应式</td><td style="width: 12.5475%;">媒体查询+流动</td><td style="width: 12.5475%;"> </td><td style="width: 24.9525%;"> </td></tr></tbody></table><p>媒体查询</p><p>宏布局</p><p>微布局</p><p>主题</p><p>媒体功能</p><p>屏幕配置</p><h2 id="mcetoc_1i70r7rqbhp">元素自适应</h2><h3 id="mcetoc_1i70r7rqbhq">排版</h3><p>文本在较大尺寸时，可变为多列，防止文本行过长</p><h4 id="mcetoc_1i70r99o1hu">国际化</h4><h3 id="mcetoc_1i70r7rqbhr">图像</h3><h3 id="mcetoc_1i70r7rqbhs">图标</h3><p>无障碍</p><p>交互</p><p>界面模式</p></div><footer class="wrapper post__footer"><p class="post__last-updated">This article was updated on 九月 7, 2024</p><div class="post__share"></div></footer><nav class="pagination"><div class="pagination__title"><span>Read other posts</span></div><div class="pagination__buttons"><a href="https://yoru-hiru.github.io/fuck-coding/web.html" class="btn previous" rel="prev" aria-label="[MISSING TRANSLATION]:  Web "><span class="btn__icon">←</span> <span class="btn__text">Web</span> </a><a href="https://yoru-hiru.github.io/fuck-coding/jing-pin-fen-xihua-wei-ying-yong-shi-chang.html" class="btn next" rel="next" aria-label="[MISSING TRANSLATION]:  竞品分析：华为应用市场 "><span class="btn__text">竞品分析：华为应用市场</span> <span class="btn__icon">→</span></a></div></nav></article></main><footer class="footer"><div class="footer__inner"><div class="footer__copyright"><p>@yoruhiru</p></div></div></footer></div><script defer="defer" src="https://yoru-hiru.github.io/fuck-coding/assets/js/scripts.min.js?v=74fad06980c30243d91d72c7c57fcdb8"></script><script>window.publiiThemeMenuConfig={mobileMenuMode:'overlay',animationSpeed:300,submenuWidth: 'auto',doubleClickTime:500,mobileMenuExpandableSubmenus:true,relatedContainerForOverlayMenuSelector:'.top'};</script><script>var images = document.querySelectorAll('img[loading]');
        for (var i = 0; i < images.length; i++) {
            if (images[i].complete) {
                images[i].classList.add('is-loaded');
            } else {
                images[i].addEventListener('load', function () {
                    this.classList.add('is-loaded');
                }, false);
            }
        }</script></body></html>