pug前端页面，一套样式等比缩放

原创 已于 2023-12-05 16:40:00 修改 · 528 阅读 · 7 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#前端
于 2023-12-05 16:38:26 首次发布
本文介绍了在开发前端页面时，如何使用`viewport`meta标签确保在移动端正常显示，包括方法一是固定宽度并禁用缩放，以及方法二是采用等比缩放策略，以便适应不同设备的屏幕尺寸。

pug前端页面，一套样式等比缩放

//- 方法一：移动端正常显示页面
meta(name="viewport" content="width=1200, user-scalable=no")
//- 指示浏览器以最新的IE内核渲染
meta(http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1")

//-方法二：等比缩放
meta(name="viewport" content="width=device-width, initial-scale=1.0")
len゛
关注
Pug 模板引擎：学习与使用
bighead的博客
03-19 4431
在 Vue 3 中使用 Pug（也称为 Jade）作为模板引擎，具有一些明显的优点和潜在的缺点。
html 等比缩放页面
BDawn的专栏
03-11 9542
根据浏览器窗口等比缩放页面 实现思路 通过css的transform scale属性对页面body元素进行缩放 缩放比例为实际窗口尺寸/设置的body像素尺寸，选择(窗口宽/body宽)和(窗口高/body高)中较小的一个 body缩放之后，位置相对于窗口出现偏移，许需要调整body的margin 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> &lt
Pug -- 全新的 Vue 高效书写体验
军火库
01-10 3978
在年初Vue3刚成为Vue的默认版本时，在文档中看到了Pug的影子，虽然好奇，由于时间关系一直没能专心去尝试一下Pug在Vue3🀄️的体验。最近决定不能一拖再拖了，熬夜体验了一番，果然没让人失望。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
关于mate标签及移动端viewport 适配++几种大厂案例分析
拥抱城市的你
08-19 1691
1.mate属性 实例 1 - 定义文档关键词，用于搜索引擎： <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 实例 2 - 定义web页面描述： <meta name="description" content="Free Web tutorials on HTML and CSS"&g...
HTML中设置网页自适应的MATE标签
热门推荐
洛阳梁朝伟的博客
07-21 1万+
一、 1.name="viewport"      //设置视口（网页可绘制的区域） 2.width=device-width    //应用程序的宽度和屏幕的宽度是一样的 3.height=device-height  //应用程序的高度和屏幕的高是一样的 4.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放） 5.mini
Cursor 对话技巧 【Prompt 模板与全局通用规则】
weixin_43837268的博客
10-13 878
本文摘要：该文档定义了资深前端工程师使用Vue3+TS+Antdv技术栈的开发规范，包含Pug+LessModules语法和项目代码规范要求。主要提供两种任务类型：1）BUG修复需分析成因、提供最小化修复方案并评估影响；2）新功能开发需明确约束条件、功能变更点和测试思路。全局规则强调TypeScript类型安全、代码整洁、async/await异步处理和错误捕获。规范要求2空格缩进、小驼峰命名，交付需通过lint检查、类型校验和用例验证。核心遵循《代码整洁之道》理念，确保可维护性和性能达标。
使用html2canvas和jsPDF做前端页面的pdf导出
spray_wave的博客
12-07 480
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ExportPdf</title> </head> <style> #detail{
Easings.net文档生成：自动化API文档的配置
gitblog_00455的博客
10-28 1001
Easings.net是一个专注于缓动函数（Easing Function）的可视化工具，提供了丰富的缓动效果展示和代码生成功能。本文将详细介绍如何通过配置实现API文档的自动化生成，帮助开发者快速集成和使用缓动函数。 ## 核心模块解析 ### 缓动函数定义模块 缓动函数的核心定义位于[src/easings/easings.ts](https://link.gitcode.com/i/0...
Sketch设计神器：Marketch插件终极指南 - 快速生成可测量HTML页面
最新发布
gitblog_00748的博客
05-15 648
**Marketch插件**是Sketch设计师的终极效率工具，能够将设计稿自动转换为可测量的HTML页面，并提供精准的CSS样式提取功能。这款免费高效的插件让设计与开发的无缝衔接成为现实，大大提升团队协作效率。掌握Marketch，你就能快速将视觉设计转化为前端可用资源，实现设计到开发的零距离对接。 ## 🚀 为什么选择Marketch？三大核心优势 Marketch不是普通的Sketch
【前端38_模板引擎】pug、nunjunks
Lovely Ruby 的手账
06-15 869
文章目录模板引擎pug安装服务器脚本标签声明内部样式定义 & 使用变量循环Case / when定义 & 调用函数引入模板引入脚本nunjunks服务器脚本变量判断语句循环语句过滤器 模板引擎 动态生成 html 的工具，模板引擎有很多，这里介绍几个，其他的类似，原理都类似的。 pug 安装 我们可以通过 npm i pug 来安装 服务器脚本 // index.js const Koa = require("koa"); const Router = require("koa-router
推荐使用：PUG-Bootstrap - 精简高效的前端开发框架
gitblog_00042的博客
05-29 462
推荐使用：PUG-Bootstrap - 精简高效的前端开发框架 1、项目介绍 PUG-Bootstrap 是一个基于Pug模板引擎的Bootstrap框架实现。它完全利用了Pug的混入（mixins）特性，旨在为前端开发者提供更快捷、更高效的界面构建方式。通过结合Bootstrap的灵活性与Pug的简洁语法，PUG-Bootstrap使得代码更加清晰，维护性更强。 2、项目技术分析 Pug，原名...
Vue中lang=pug模板引擎之pug模板语法
weixin_52740695的博客
06-25 1727
pug 是一种前端模板引擎，原名 jade，可用来生成 HTML，它的写法类似于 CSS。入门指南 – PugHTML标签必须进行闭合，如果不闭合的话容易报错。HTML没有模板机制，如果不使用前端框架维护起来非常困难。易理解，极大的简约了我们的代码。
pc端页面在移动端等比例缩放
2201_75568521的博客
01-25 2215
但是有一个问题就是我在配置的时候发现安卓机好使在ios上不生效。
pug模板引擎基本用法
前端副本ing的小王
05-30 3039
一、pug模板引擎基本用法 Pug是jade的新版，jade由于商标已被注册，所以更名为pug。 缩进标注：Pug模板和大多数模板不同，它有自己的语法特点，采用缩进的方式进行标注，使用这种方式，使得代码更加清晰。 无尾标签：这种语法不需要类似 /html 这样的尾标签。 文本书写：在标签后 +空格+内容 的方式进行书写文本，例如下面代码中 h1后跟的 website即为标题名文本。 属性添加：在标签后用()括号对属性进行编写。 //views文件夹下index.pug文件 h
HTML中网页缩放配置mete-viewport
JackieDYH的博客
01-04 1535
标签的作用是为了确保网页在移动设备上以设备宽度为基准进行显示，同时限制了初始和最大的缩放级别，允许用户手动缩放，并禁止自动缩小适应。这有助于提供更一致和可控的移动端用户体验。视口是用户在网页上看到的可见区域，而这个标签的目的是为了确保网页在各种设备上能够以合适的方式显示。这是一个用于设置网页视口（viewport）的HTML。
Vue动画篇（二）——使用animate(1)
2401_84434237的博客
04-29 808
使用第三方animate.css类库实现动画前面我们已经学习了过渡类动画的六个过程和使用方式，还学会了给不同的transition定义不同的名称用以分别不同的动画。但是如果每一个动画都要自己写就会很浪费时间并且不易实现。因此我们可以借助第三方animate.css类库来实现一些特殊的动画。实例flag”>动画使用 :duration = "毫秒值" 来设置 入场 和 离场 时候的动画时长。
在 Vue 的template中使用 Pug 的完整教程
ChuXiao的博客
06-05 2167
（原名 Jade）是一种高效的网页模板引擎，通过缩进式语法和简洁的写法减少 HTML 的冗长代码。Pug 省略了尖括号和闭合标签，使用缩进定义结构，使代码更简洁、可读。
移动端meta标签的使用和设置
xiaozhen0610的博客
07-22 415
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">width 和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。width指令使用device- width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height
Pug-Bootstrap：前端界面构建与实践
weixin_32311823的博客
07-23 1235
Pug模板语法简洁明了，主要由空格和换行符来定义代码块的嵌套关系。它不使用HTML标签，而是使用Pug特定的关键字来定义各种HTML结构。例如，div标签在Pug中写作div，而类和ID的定义则通过点（）和井号（）来表示，如下所示：htmlheadbodyBootstrap 为 web 开发提供了一个美观且响应式的前端框架，其内部含有大量的预定义CSS类。开发者们可以利用这些类快速搭建出美观和功能强大的界面。
推荐项目：PUG-Bootstrap——前端开发的快捷之道
gitblog_00278的博客
08-28 446
推荐项目：PUG-Bootstrap——前端开发的快捷之道 在当今快速迭代的Web开发领域，选择对的工具能够极大提升开发效率和网站性能。今天，我们隆重推荐一个将两大优秀技术融合的开源项目——PUG-Bootstrap。这个项目通过将流行的前端框架Bootstrap转换成Pug（之前称为JADE）模板引擎的混入（mixins），为开发者提供了一种高效且优雅的构建界面的方式。 项目介绍 PUG-Boo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值