web前端页面适配方法

2023-11-11

流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局

视觉窗口:viewport,是移动端特有。这是一个虚拟的区域,承载网页的。

承载关系:浏览器---->viewport---->网页

适配要求:

1. 网页宽度必须和浏览器保持一致

2. 默认显示的缩放比例和PC端保持(缩放比例1.0)

3. 不允许用户自行缩放网页

满足这些要求达到了适配,国际上通用的适配方案,标准的移动端适配方案。

适配设置:

如果任何设置都没有,默认走的就是viewport的默认设置

去设置新的viewport设置,达到适配要求。

<meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置

viewport的功能:

1. width 可以设置宽度 (device-width 当前设备的宽度)

2. height 可以设置高度

3. initial-scale 可以设置默认的缩放比例

4. user-scalable 可以设置是否允许用户自行缩放

5. maximum-scale 可以设置最大缩放比例

6. minimum-scale 可以设置最小缩放比例

在<meta name="viewport" content="" > content="" 使用以上参数

1. width=device-width 宽度一致比例是1.0

2. initial-scale=1.0 宽度一致比例是1.0

3. user-scalable=no 不允许用户自行缩放 (yes,no 1,0)

标准适配方案:

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

meta:vp + tab 快捷方式

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

web前端页面适配方法 的相关文章

  • CSS整体界面设计

  • 学习CSSGrid布局

    一 重要术语 CSS Grid 网格 布局 又称为 Grid 网格 是一个二维的基于网格的布局系统 它的目标是完全改变我们基于网格的用户界面的布局方式 FlexBox 一维布局 Grid 二维布局 Flexbox 和 Grid 能协同工作
  • CSS怎么将DIV中的a标签改颜色

    标签默认文字是蓝色 点过后是文字是紫色 想改变标签文字颜色设置方法如下 a color black 设置默认颜色 a link color blue 未访问颜色 a visited color gray 已访问颜色 a hover colo
  • 表单页面美化(html、css)

    表单页面美化 html css 效果图片 实现代码 html部分就是平常的输入框 div class mainfont h1 在线预约 h1 div div class form div
  • css3颜色渐变:css3如何实现背景颜色渐变?

    为了开发网页的美观 css3背景颜色渐变是经常会用到的 那么 css3背景颜色渐变如何设置呢 本篇文章我们就来介绍关于css颜色渐变背景的设置方法 我们要知道的是css3渐变有两种类型 css3线性渐变和css3径向渐变 下面我们就来看一下
  • 对象转换为JSON数据格式&使用JQuery获取数据

    将对象转换为JSON数据格式 我们需要json lib 2 3 jdk15 jar架包 当然还需要其它架包 来实现对象转JSON数据格式 此架包提供两个类来实现转换 JSONObject fromObject object 将对象转换成js
  • 科技感十足的網站頁面

    http www bootstrapmb com item 9102 preview
  • 在JavaScript的ES5版本中Array数组的reduce方法详解

    函数声明 reduce callback initialValue 参数说明 callback 回调函数 格式为function prev next initialValue 初始值 可选参数 返回值 最后一次执行callback 回调函数
  • VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改

    问题 局部全屏后el popover弹出框失效 解决方法
  • React 中ref的几种用法

    React 中ref的几种用法 1 字符串 通过 this refs a 来引用真实dom的节点 dom 节点上使用
  • ES6语法知识点

    目录 let const 常用 暂时性死区 const 建议 箭头函数 常用 建议 iterator迭代器 解构赋值 常用 建议 剩余 扩展运算符 常用 扩展运算符 剩余运算符 在对象中使用扩展运算符 建议 对象属性 方法简写 常用 对象属
  • 基础15:npm、yarn、pnpm

    npm2 用 node 版本管理工具把 node 版本降到 4 那 npm 版本就是 2 x 了 执行 npm init npm install express 可以看到node modules目录如下 可以看到 npm2的node mod
  • vue/cli3添加自定义icon图标

    1 从阿里巴巴矢量图表库将需要的图标 加入购物车 点击购物车 2 选择添加至项目 3 下载到本地 放到项目中 4 在main js中引入iconfont css文件 以实际位置为准 import assets fonts download
  • CSS 学习笔记(基础)

    用来控制网页表现的语言 CSS Cascading Style Sheet 层叠样式表 然后我们继续看看 W3C 标准 结构 HTML 表现 CSS 行为 JavaScript CSS导入方式 选择器 属性 由于网页的框架结构是由HTML实
  • (一)软件架构概述

    1 系统结构 B S架构 Browser Server 浏览器 服务器的交互形式 Browser支持哪些语言 HTML CSS JavaScript 写HTML CSS JavaScript代码的这波人职位叫做 WEB 前端开发工程师 Ja
  • react(craco)移动端使用postcss-px-to-viewport自适应布局

    Craco 使用postcss px to viewport devDependencies craco craco 6 4 3 xianzhengquan postcss px 2 vw 0 0 1 postcss 8 3 0 peerD
  • 谷歌(Chrome)浏览器自定义插件

    准备 1 js文件 需要的功能逻辑 2 插件主入口及配置 manifest json 3 插件图标 目录结构 添加插件流程 选择插件文件夹 代码 manifest json name 百度 manifest version 2 versio
  • node中间件是什么意思?

    node中间件是什么意思 2020 09 11 16 11 17分类 常见问题 Node js答疑阅读 1757 评论 0 中间件是一种独立的系统软件或服务程序 分布式应用软件借助这种软件在不同的技术之间共享资源 中间件位于客户机 服务器的
  • 探索CSS:从入门到精通Web开发(二)

    前言 当我们谈论网页设计和开发时 CSS 层叠样式表 无疑是其中的重要一环 作为HTML的伴侣 CSS赋予网页以丰富的样式和布局 使得网站看起来更加吸引人并且具备更好的可读性 本书将通过一系列深入浅出的方式 带你从入门到精通CSS 探索We
  • <a>标签的超链接前面会自动加上当前(网站)地址

    当前 网站 地址是 fyh com 在代码里写 a 标签时 会自动在链接前添加 fyh com 例如写如下代码 a href www baidu com baidu a 在浏览器中点击链接会跳转至 fyh com www baidu com

随机推荐

  • LeetCode Longest Palindromic Substring 最长回文子字符串 两种方法分析解答

    Longest Palindromic Substring Given a stringS find the longest palindromic substring inS You may assume that the maximum
  • Java人机猜拳游戏 (完整代码+详细注释+粘贴即食)

    文章目录 游戏规则 代码 实现截图 参考博客 阿里嘎多 游戏规则 游戏结束条件 我赢 代码 package Hello 注意修改名称与文件名保持一致 import java util Scanner public class Hello p
  • Python selenium webdriver 基本使用

    系列文章目录 selenium webdriver 的常用示例 文章目录 系列文章目录 selenium webdriver 的常用示例 前言 一 Pip安装 创建Bowser对象 1 Pip install selenium 2 创建Bo
  • Java开发环境搭建,保姆级JDK下载,安装,环境变量配置,一系列的完整流程的操作截图以及详细文字说明,JDK,JRE环境变量怎么配?这一篇就够了。

    Java的基础开发环境搭建 前言 提前了解一下以下知识在操作过程中会更加流畅哦 文件目录 https baike baidu com item E6 96 87 E4 BB B6 E7 9B AE E5 BD 95 7204308 fr a
  • MCS51 系列单片机的最小系统

    让单片机工作的前提是为它添加必要的外围电路以构成单片机最小系统 初学者可能对 单片机最小系统感觉很神秘 其实单片机最小系统很简单 就是能使单片机工作的最少的器件构成的系统 最小系统虽然简单 但是却是大多数控制系统所必不可少的关键部分 对于
  • AGG简介

    AGG是一个开源 高效的跨平台2D图形库 AGG的功能与GDI 的功能非常类似 但提供了比GDI 更灵活的编程接口 其产生的图形的质量也非常高 自称超过GDI 使用前AGG的准备工作 下载AGG库 它的家在http www antigrai
  • 5. 使用PyTorch预先训练的模型执行目标检测

    5 使用PyTorch预先训练的网络执行目标检测 PyTorch是什么 使用PyTorch训练第一个神经网络 使用PyTorch训练第一个卷积神经网络 使用预训练网络进行PyTorch图像分类 使用预训练网络进行PyTorch目标检测 今天
  • 记录STM32各类串口中断实验

    STM32F407VG使用cubemx LL库 波特率115200 一位停止位 无校验 单片机初始化串口一 PA8高速推挽输出 使用逻辑分析仪100M采样捕获各类串口中断触发时的波形 首先是喜闻乐见的RXNE 理论是只要串口成功接收一byt
  • Cache 和 Buffer 有什么区别

    Cache 和 Buffer 有什么区别 转载 talkwithtrend https mp weixin qq com s YsEOBVS7fXgrGXnXH1I0MQ Cache和Buffer简单的说 Cache是加速 读 而buffe
  • android自定义可缩放,移动图像裁剪框

    在实际项目中 经常要制作一个简易的图像裁剪功能 即获取一张图片 并用一个遮罩层选择目标范围并截取保存的功能 如下图所示 在此分享下该自定义视图的制作过程 需求说明 整一个视图包含一个透明的遮罩层 一个透明带白色边框的矩形 要实现的功能是 点
  • oracle 问题 :Cause: java.sql.SQLSyntaxErrorException: ORA-00933: SQL 命令未正确结束

    使用mysql时使用的sql语句常有 结尾的语句 但oracle中不能出现 结尾 因为oracle解析器很严谨 不支持 结尾语句解析
  • C基础day6(2023.7.6)

    一 Xmind整理 二 课上练习 练习1 循环嵌套 三个循环结构可以任意嵌套 include
  • Python爬虫分析唯品会商品数据 +数据可视化

    目录 前言 数据来源分析 1 明确需求 2 抓包分析 通过浏览器自带工具 开发者工具 代码实现步骤 发送请求 gt 获取数据 gt 解析数据 gt 保存数据 发送请求 解析数据 保存数据 数据可视化 先读取数据 泳衣商品性别占比 商品品牌分
  • Springmvc+mybatis+Dubbo+ZooKeeper+Redis+KafKa

    开发工具 1 Eclipse IDE 采用Maven项目管理 模块化 2 代码生成 通过界面方式简单配置 自动生成相应代码 目前包括三种生成方式 增删改查 单表 一对多 树结构 生成后的代码如果不需要注意美观程度 生成后即可用 技术选型 只
  • Androidstudio快捷操作之多选

    如图 想要批量复制属性名 不需要一个一个的复制 只需按住alt 鼠标左键从上往下拉 将光标定位在每个属性名的前面 再按ctrl w就可以选中所有光标后面的单词了
  • QT里使用sqlite的问题,好多坑

    1 我使用sqlite 开发机上好好的 测试机上却不行 后来发现是缺少驱动 Driver not loaded Driver not loaded 代码检查了又检查 发现应该是缺少dll文件 系统不提示 是自己使用 QMessageBox
  • c语言基础五子棋,十分的易懂理解,详细解释,容易上手

    前言 提示 经过b站和视频学习后编程 提示 以下是本篇文章正文内容 下面案例可供参考 文章目录 前言 五子棋 头文件 展示棋盘 display 下棋 PlayMove 主体函数 game 完整代码 五子棋 本篇博客主要写了关于c语言的五子棋
  • MySQL主从搭建-Centos实战

    目录 一 规划说明 二 主节点安装MySQL 1 下载MySQL和安装 2 启动Mysql 设置root密码 允许远程登录 三 副节点安装MySQL 参考主节点 四 主节点配置 1 配置my cnf 修改默认存储目录为指定目录 data 下
  • 解决SQL查询总是超时已过期

    解决SQL查询总是超时已过期 在WIN8里提示 OLE DB 或 ODBC 错误 查询超时已过期 HYT00 1 由于数据库设计问题造成SQL数据库新增数据时超时 症状 Microsoft OLE DB Provider for SQL S
  • web前端页面适配方法

    流式布局 就是百分比布局 非固定像素 内容向两侧填充 理解成流动的布局 称为流式布局 视觉窗口 viewport 是移动端特有 这是一个虚拟的区域 承载网页的 承载关系 浏览器 gt viewport gt 网页 适配要求 1 网页宽度必须