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

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

news 2025/9/19 1:41:47

文章目录

  • 一、视口标签设置
  • 二、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

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/7/28 19:57:25

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/9/18 12:54:35

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/9/9 15:02:38

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/12 10:25:58

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/7/27 1:33:21

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/9/14 12:58:54

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/8/4 22:42:24

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2025/9/9 10:09:47

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/9/13 17:38:35

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/9/2 17:53:12