当前位置： 首页 > news >正文

【移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

news 2026/5/21 1:44:17

文章目录

  • 一、视口标签设置
  • 二、CSS 样式文件设置
  • 三、布局宽度设置
    • 1、设置布局宽度
    • 2、设置布局最大宽度
    • 3、设置布局最小宽度
    • 4、查看网页最大最小宽度
    • 5、布局宽度设置
  • 四、代码示例
    • 1、主界面标签
    • 2、CSS 布局设置





一、视口标签设置


参考 【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 ) 博客 , 编写 meta 视口标签 , 视口标签内容如下 :

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

meta 视口标签属性含义 :

  • name 属性指定了 视口的名称 为 viewport ;
  • content 属性中的参数 用于设置 视口大小 和 缩放比例 ;
    • width=device-width 样式 设置 网页宽度 = 设备宽度 , 即 理想视口 ;
    • user-scalable=no 样式 设置 用户是否可以手动缩放网页 ; 可设置 yes / no , 或者 1 / 0 ;
    • initial-scale 样式 设置 网页初始缩放比例 , 该值大于 0 即可 ;
    • minimum-scale 参数 设置 网页缩放的最小比例 , 该值大于 0 即可 ;
    • maximum-scale 参数 设置 网页缩放的最大比例 , 该值大于 0 即可 ;




二、CSS 样式文件设置


在 index.html 同级目录中 , 创建 css 文件夹 , 在其中存放如下两个 css 样式文件 :

  • normalize.css 初始化样式文件 : 参考 【移动端网页布局】移动端网页布局基础概念 ⑨ ( webkit 内核 | 移动端网页 CSS 初始化 - normalize.css ) 博客下载 normalize.css 文件 ;
  • index.css 要实现的样式文件 : 自己创建的 CSS 样式文件 ;
<head><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><!-- 引入 css 初始化样式 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入要开发的 CSS 文件 --><link rel="stylesheet" href="css/index.css">
</head>




三、布局宽度设置



1、设置布局宽度


在移动端网页布局中 , 网页布局宽度 = 移动设备宽度 , 因此在进行布局时 , 可以为网页布局的主体 <body> 标签设置 100% 宽度 ;


2、设置布局最大宽度


将 京东 手机端页面 , 拉倒最大便不再放大 , 如下图所示 ,

在这里插入图片描述
这是因为该页面设置了最大像素 ;

一般移动端页面最大像素设置为 980 像素 ;


3、设置布局最小宽度


将京东的 手机端 页面宽度压缩到最小 , 如下状态时 , 就不能再进行压缩了 ,

在这里插入图片描述

这是因为该页面设置了最小宽度 ;

一般设置最小宽度 320 像素 , 智能手机中的屏幕如果是 320 像素 , 这就是最小的手机屏幕了 ;


4、查看网页最大最小宽度


进入京东页面 , 按 F12 进入调试模式 , 可以看到最大宽度是 1080 像素 , 最小宽度是 320 像素 ;

在这里插入图片描述


5、布局宽度设置


body {/* 网页布局宽度 = 设备宽度 */width: 100%;/* 最小宽度 320 像素 */min-width: 320px;/* 最大宽度 640 像素 */max-width: 640px;/* 居中对齐 */margin: 0 auto;/* 字体大小 14 像素 */font-size: 14px;/* 如果是苹果就是用苹果默认字体 如果不是苹果手机 就使用后啊面的字体 */font-family: -apple-system, Helvetica, sans-serif;/* 字体颜色 */color: #666;/* 行高 */line-height: 1.5;
}




四、代码示例



1、主界面标签


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!-- 引入 css 初始化样式 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入要开发的 CSS 文件 --><link rel="stylesheet" href="css/index.css"><title>流式布局示例</title>
</head><body>
</body></html>

2、CSS 布局设置


body {/* 网页布局宽度 = 设备宽度 */width: 100%;/* 最小宽度 320 像素 */min-width: 320px;/* 最大宽度 640 像素 */max-width: 640px;/* 居中对齐 */margin: 0 auto;/* 字体大小 14 像素 */font-size: 14px;/* 如果是苹果就是用苹果默认字体 如果不是苹果手机 就使用后啊面的字体 */font-family: -apple-system, Helvetica, sans-serif;/* 字体颜色 */color: #666;/* 行高 */line-height: 1.5;
}

相关文章：

【移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

文章目录 一、视口标签设置二、CSS 样式文件设置三、布局宽度设置1、设置布局宽度2、设置布局最大宽度3、设置布局最小宽度4、查看网页最大最小宽度5、布局宽度设置 四、代码示例1、主界面标签2、CSS 布局设置 一、视口标签设置 参考 【移动端网页布局】移动端网页布局基础概念…...

编程日记 2023/5/30 18:31:05

力扣---LeetCode88. 合并两个有序数组

文章目录 前言88. 合并两个有序数组链接&#xff1a;方法一&#xff1a;三指针(后插)1.2 代码&#xff1a;1.2 流程图&#xff1a;方法二&#xff1a;开辟新空间2.1 代码&#xff1a;2.2 流程图&#xff1a;2.3 注意&#xff1a; 总结 前言 “或许你并不熠熠生辉甚至有点木讷但…...

编程日记 2023/4/29 2:25:41

H7-TOOL的CANFD Trace全解析功能制作完成，历时一个月（2023-04-28）

为了完成这个功能&#xff0c;差不多耗费了一个月时间&#xff0c;精神状态基本已经被磨平了。 当前已经支持&#xff1a; 1、LUA小程序控制&#xff0c;使用灵活。 2、采用SWD接口直接访问目标板芯片的CANFD外设寄存器和CANFD RAM区实现&#xff0c;支持USB&#xff0c;以太网…...

编程日记 2023/4/29 2:20:40

探析Android中的四类性能优化

作者&#xff1a;Yj家的孺子牛 流畅性优化 主线程模型 了解 Android 的流畅性优化之前&#xff0c;我们需要先了解Android的线程结构。在 Android 中&#xff0c;有一个主线程模型&#xff0c;其中所有的绘制以及交互都是在主线程中进行的&#xff0c;所以&#xff0c;当我们…...

编程日记 2023/4/29 2:15:39

ubuntu18.04 安装编译zlmediakit

参考http://www.cherrylord.cn/archives/zlmediakit 1、获取代码 #国内用户推荐从同步镜像网站gitee下载 git clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit cd ZLMediaKit #千万不要忘记执行这句命令 git submodule update --init#国内用户推荐…...

编程日记 2023/4/29 2:10:38

C++ -5- 内存管理

文章目录 C语言和C内存管理的区别示例1. C/C 中程序内存区域划分2. C中动态内存管理3.operator new 与 operator delete 函数4.new 和 delete 的实现原理5.定位new表达式 C语言和C内存管理的区别示例 //C语言&#xff1a; struct SListNode {int data;struct SListNode* next; …...

编程日记 2023/5/29 19:40:15

（Linux）在Ubuntu系统中添加新用户并授予root权限

向Ubuntu系统中添加新用户并为其授予root权限的步骤如下: 打开终端Terminal 输入命令: sudo su - 以 root 身份登录. 注: sudo su : 切换root身份, 不携带当前用户环境变量 sudo su - : 切换root身份, 携带当前用户环境变量 输入命令: adduser username 向Ubuntu系统中添…...

编程日记 2023/4/29 2:00:36

AttributeError: ‘ChatGLMModel‘ object has no attribute ‘prefix_encoder‘

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

编程日记 2023/4/29 1:55:35

Huggingface的GenerationConfig 中的top_k与top_p详细解读

Huggingface的GenerationConfig 中的top_k与top_p详细解读 Top_kTop_p联合共用 Top_k top-k是指只保留概率最高的前k个单词&#xff0c;然后基于剩余单词的概率进行归一化&#xff0c;从中随机抽取一个单词作为最终输出。这种方法可以限制输出序列的长度&#xff0c;并仍然保持…...

编程日记 2023/4/29 1:50:34

学生信息管理系统简易版(文件读写操作)

功能模块 具体功能如下&#xff1a; 添加学生信息修改学生信息&#xff08;按学号&#xff09;排序&#xff08;分别按总分升序、降序、以及按姓名升序&#xff09;查找学生&#xff08;按学号&#xff09;删除学生查看所有学生信息 数据结构体设计 本表设计一个学生信息的结…...

编程日记 2023/4/29 1:45:33

C/C++每日一练(20230426)

目录 1. 不喜欢带钱的小C &#x1f31f;&#x1f31f; 2. 数组排序 ※ 3. 超级素数 ※ &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 不喜欢带钱的小C 小C不喜欢带钱&#xff0c…...

编程日记 2023/4/29 1:40:31

halcon灰度积分投影/垂直积分投影

简介：关于灰度投影积分可以用到的场合很多，例如分割字符，分割尺子上的刻度等，适用于有规律的变化这些内容的检测。本文复现了论文《基于深度学习和灰度纹理特征的铁路接触网绝缘子状态检测》中灰度积分投影实现了对绝缘子缺陷位置的检测。见（图1）灰度积分垂直方向投影获得…...

编程日记 2023/4/29 1:35:30

Unity打包的apk在安卓4.4.2盒子上碰到的问题

项目场景&#xff1a; Unity开发的项目需要在安卓4.4.2盒子上运行。 问题描述 1、会出"从顶部向下滑动即可退出全屏模式。"的弹框&#xff0c;这是android4.4的一个特性&#xff0c;叫做沉浸模式&#xff08;Full-screen Immersive Mode)&#xff0c;当app启用该模…...

编程日记 2023/4/29 1:30:29

docker的简单使用（centos7中为例）

安装&#xff1a; yum -y install docker 启动&#xff1a; service start docker 搜索镜像&#xff1a; docker search centos:7.9 下载镜像&#xff1a; docker pull docker.io/18703283952/mycentos 查看所有镜像&#xff1a; docker images 启动并进入镜像&#xff1a…...

编程日记 2023/4/29 1:25:28

Stable Diffusion人工智能图像合成

AI 图像生成大有来头。新发布的开源图像合成模型称为Stable Diffusion&#xff0c;它允许任何拥有 PC 和像样的 GPU 的人想象出他们能想象到的几乎任何视觉现实。它几乎可以模仿任何视觉风格&#xff0c;如果你给它输入一个描述性的短语&#xff0c;结果就会像魔术一样出现在你…...

编程日记 2023/4/29 1:20:26

【Java EE】-CSS详解

作者&#xff1a;学Java的冬瓜 博客主页&#xff1a;☀冬瓜的主页&#x1f319; 专栏&#xff1a;【JavaEE】 分享: 且视他人如盏盏鬼火&#xff0c;大胆地去走你的道路。——史铁生《病隙碎笔》 主要内容&#xff1a;CSS引入html的三种方式&#xff0c;CSS八大选择器&#xff…...

编程日记 2023/6/1 3:40:18

C#_语言简介

目录 1. C# 简介 2. Visual Studio 窗口界面显示 1. C# 简介 什么是程序&#xff1f; 程序&#xff08;Program&#xff09;简单来说就是&#xff1a; 计算机是无法听懂我们人类的语言的&#xff0c;也可以说我们通过我们日常交流的语言是无法控制计算机的&#xff0c;计算机…...

编程日记 2023/4/29 1:10:23

【Python_Opencv图像处理框架】直方图与傅里叶变换

写在前面 本篇文章是opencv学习的第五篇文章&#xff0c;主要讲解了直方图与傅里叶变换的有关操作&#xff0c;作为初学者&#xff0c;我尽己所能&#xff0c;但仍会存在疏漏的地方&#xff0c;希望各位看官不吝指正&#x1f970; 写在中间 一、直方图 &#xff08; 1 &…...

编程日记 2023/4/29 1:05:21

Know-Evolve: Deep Temporal Reasoning for Dynamic Knowledge Graphs

Know-Evolve: Deep Temporal Reasoning for Dynamic Knowledge Graphs Rakshit Trivedi 1 Hanjun Dai 1 Yichen Wang 1 Le Song 1 知识背景 Temporal Knowledge Graph : facts occur,recur or evolve over time in these graphs,and each edge in the graphs have temporal …...

编程日记 2023/4/29 1:00:20

电脑高效率工作、学习工具软件推荐

本文介绍在学习、工作时&#xff0c;实测很好用、明显提高工作效率的几个免费电脑软件与小工具。 1 Microsoft To Do 官方网站&#xff1a;https://todo.microsoft.com/tasks/ Microsoft To Do是一款由Microsoft公司开发的待办事项管理应用程序。它提供了一个简单易用的界面&a…...

编程日记 2023/4/29 0:55:19

负载锌酞菁（ZnPc）/α-萘酚温敏水凝胶，ZnPc/α-Naphthol

名称&#xff1a;负载锌酞菁&#xff08;ZnPc&#xff09;/α-萘酚温敏水凝胶&#xff0c;ZnPc/α-Naphthol 一、材料概览&#xff1a;双重功能的精妙融合 负载锌酞菁&#xff08;ZnPc&#xff09;/α-萘酚温敏水凝胶&#xff0c;是将具有优异光催化活性的锌酞菁&#xff08;Zn…...

编程新知 2026/5/21 1:34:04

为内部ai工具平台集成taotoken实现多模型灵活切换的方案

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为内部AI工具平台集成Taotoken实现多模型灵活切换的方案 在企业内部开发AI工具平台时&#xff0c;一个常见的挑战是如何为不同的业…...

编程新知 2026/5/21 1:10:59

嵌入式AI四大趋势：硬件定义模型、工具链平民化、多模态融合与系统级安全

1. 项目概述&#xff1a;嵌入式AI的十字路口与新机遇最近和几位在芯片原厂、终端设备公司做研发的朋友聊天&#xff0c;大家不约而同地都在讨论同一个话题&#xff1a;嵌入式AI的玩法&#xff0c;好像和几年前不太一样了。过去我们一提到“嵌入式AI”&#xff0c;脑子里蹦出来的…...

编程新知 2026/5/21 0:26:18

新手创业是注册公司好还是注册个体户好？

很多刚准备创业的朋友&#xff0c;最先纠结的问题就是&#xff1a;我到底是注册个体工商户&#xff0c;还是直接注册有限公司&#xff1f;一、先搞懂最核心的本质区别个体户属于个人经营模式&#xff0c;承担无限连带责任&#xff0c;简单说就是生意出问题&#xff0c;个人资产…...

编程新知 2026/5/20 23:27:30

Whisky深度评测：如何在Apple Silicon Mac上构建Windows应用运行沙箱

Whisky深度评测&#xff1a;如何在Apple Silicon Mac上构建Windows应用运行沙箱 【免费下载链接】Whisky A modern Wine wrapper for macOS built with SwiftUI 项目地址: https://gitcode.com/gh_mirrors/wh/Whisky 随着Apple Silicon芯片在Mac产品线中的全面普及&…...

编程新知 2026/5/20 22:32:08

Node.js框架深度解析：从Express到Nest.js，如何选择最适合你的Web开发框架？

1. 项目概述&#xff1a;为什么Node.js框架值得你花时间研究&#xff1f;如果你是一名Web开发者&#xff0c;或者正在向这个方向转型&#xff0c;那么“Node.js框架”这个词组对你来说一定不陌生。但面对市面上林林总总的框架&#xff0c;从Express、Koa到Nest.js、Fastify&…...

编程新知 2026/5/20 21:27:50

Ubuntu20.04下Mapviz插件生态与多源数据融合实战

1. Mapviz简介与核心价值 Mapviz是ROS生态中一款专注于2D数据可视化的神器&#xff0c;它的独特之处在于模块化插件架构。不同于Rviz主要处理3D数据&#xff0c;Mapviz更擅长处理地理空间信息的可视化&#xff0c;比如我在做农业机器人项目时&#xff0c;需要同时监控GPS轨迹、…...

编程新知 2026/5/20 20:41:47

创业团队如何利用taotoken多模型能力快速进行产品原型验证

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 创业团队如何利用Taotoken多模型能力快速进行产品原型验证 对于资源有限的创业团队而言&#xff0c;开发一个智能对话产品原型时&a…...

编程新知 2026/5/20 20:35:39

3步掌握B站视频智能分析：BiliTools免费工具箱终极指南

3步掌握B站视频智能分析&#xff1a;BiliTools免费工具箱终极指南 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持下载视频、番剧等等各类资源 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliTools 你…...

编程新知 2026/5/20 18:47:56

5分钟掌握HTML转Word：html-to-docx让文档格式转换变得简单高效

5分钟掌握HTML转Word&#xff1a;html-to-docx让文档格式转换变得简单高效 【免费下载链接】html-to-docx HTML to DOCX converter 项目地址: https://gitcode.com/gh_mirrors/ht/html-to-docx 还在为HTML内容无法完美转换为Word文档而烦恼吗&#xff1f;html-to-docx是…...

编程新知 2026/5/20 18:20:43