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

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

news 2025/11/9 9:38:59

文章目录

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

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/10/30 5:06:46

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/11/8 5:57:07

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/8/9 13:14:15

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/9/7 19:10:42

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45