在开发移动端的时候需要适配各种机型,有大的,有小的,我们需要一套代码,在不同的分辨率适应各种机型。
因此我们需要设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动设备具有各种不同的屏幕尺寸和分辨率,例如智能手机和平板电脑。为了提供更好的用户体验,网页需要根据设备的屏幕宽度进行自适应布局。如果不设置width=device-width
,移动设备会按照默认的视口宽度(通常是较宽的桌面屏幕)来渲染网页,导致网页内容在移动设备上显示不正常,可能出现内容被截断或需要水平滚动的情况
然后我们实现一个经典的圣杯布局
圣杯布局:在CSS中,圣杯布局是指两边盒子宽度固定,中间盒子自适应的三栏布局,其中,中间栏放到文档流前面,保证先行渲染;
<template>
<div>
<header>
<div>left</div>
<div>center</div>
<div>right</div>
</header>
</div>
</template>
header {
display: flex;
justify-content: space-between;
div {
height: 50px;
color: white;
text-align: center;
line-height: 50px;
}
div:nth-child(1) {
width: 100px;
background: red;
}
div:nth-child(2) {
flex: 1;
background: green;
}
div:nth-child(3) {
width: 100px;
background: blue;
}
}
正常手机看着也还行
但是如果是小手机就会有问题 很挤
发现px是相对单位固定的,无法进行自适应,不会随着屏幕尺寸的改变而改变。
而rem
是根据html的font-size 进行缩放的,可以进行自适应,缺点就是需要计算每个屏幕大小所对应的font-size
vw vh
是相对viewport 视口的单位,配合meta标签可以直接使用,无需计算
1vw=1/100视口宽度
1vh=1/100视口高度
当前屏幕视口是375像素,1vw就是3.75像素
现在知道了用什么单位,但是我们还要根据px去换算vw就很麻烦,能不能自动转换???
https://cn.vitejs.dev/config/shared-options.html#css-postcss
发现vite已经内置了postCss
https://www.postcss.com.cn/
postCss 提供了 把Css 转换AST的能力,类似于Babel
,为此我们可以编写一个插件用于将px转换为vw
npm init vue
构建一个vue项目
根目录新建一个plugins文件夹新建两个文件pxto-viewport.ts type.ts
然后在 tsconfig.node.json 的includes 配置 "plugins/**/*",
compilerOptions 配置 noImplicitAny:false
pxto-viewport.js
import type {
Options } from './type'
import type {
Plugin } from 'postcss'
const defaultOptions = {
viewPortWidth: 375,
mediaQuery: false,
unitToConvert:'px'
}
export const pxToViewport = (options: Options = defaultOptions): Plugin => {
const opt = Object.assign({
}, defaultOptions, options)
return {
postcssPlugin: 'postcss-px-to-viewport',
//css节点都会经过这个钩子
Declaration(node) {
const value = node.value
//匹配到px 转换成vw
if (value.includes(opt.unitToConvert)) {
const num = parseFloat(value)
const transformValue = (num / opt.viewPortWidth) * 100
node.value = `${
transformValue.toFixed(2)}vw` //转换之后的值
}
},
}
}
type.ts
export interface Options {
viewPortWidth?: number;
mediaQuery?: boolean;
unitToConvert?: string;
}
vite.config.ts 引入我们写好的插件
css:{
postcss:{
plugins:[
pxToViewport()
]
},
},
这样的话各种屏幕都差不多了。
比如要增加一个 可以设置全局的字体大小 或者全局背景颜色切换应该怎么做呢?
npm i @vueuse/core
:root {
--size: 14px;
}
div {
height: 50px;
color: white;
text-align: center;
line-height: 50px;
font-size: var(--size);
}
<div>
<button @click="change(36)">大</button>
<button @click="change(24)">中</button>
<button @click="change(14)">小</button>
</div>
import {
useCssVar } from '@vueuse/core'
const change = (str: number) => {
const color = useCssVar('--size')
color.value = `${
str}px`
}
useCssVar 的底层原理就是
document.documentElement.style.getPropertyValue('--size')
读取就是get设置就是set 只要想切换的页面用这个css变量就可以了,如果想持久存储就用localstorage
文章浏览阅读966次。tf实现Focal−Losstf实现Focal-Losstf实现Focal−Loss_focal loss tf
文章浏览阅读232次。/* *//* InstPubs.SQL - Creates the Pubs database */ /* *//*** Copyright Microsoft, Inc. 1994 - 2000** All Rights Reserved.*/SET NOCOUNT ONGOset nocount onset dateformat mdyUSE masterdeclare @d..._sql2000中自带的pubs数据库中的表
文章浏览阅读2.6k次。各位好:App iOS端适配iOS 15系统,适配后将使用新的xcode 13打包提交App Store。一、适配内容:1、新增了iPhone 13 mini机型(尺寸同iPhone12 mini),5.4 英寸 (对角线) OLED 全面屏,屏幕分辨率为2340 x 1080 像素。如果是通过分辨率来判断则需要增加一个模式。 #define iPhone13mini ([UIScreen instancesRespondToSelector:@selector(currentMo_lsapplicationqueriesschemes 超过 50 怎么办
文章浏览阅读497次。右侧显示就是我们主机发送http/https请求的记录。如果我们要查看某一次访问,可以双击该记录,在右侧就会显示这次http请求的内容以及返回的响应的内容。右键全选,点击remove,选择selected sessions,就能删除选择的sessions。安装过程只用一路next即可;_fiddler抓包下载
文章浏览阅读642次。PPT内容这是htmlppt课件,关于第2章Web编程技术,包括了HTML的发展历史,HTML的基本框架,HTML的各种常用标记:文字标记、图片标记、超级链接标记,CSS的基本使用方法,如何让CSS与HTML协同工作,JavaScript中的变量、数组、表达式、运算符、流程控制语句,JavaScript的函数、内置对象、浏览器对象的层次和DOM模型的建立和使用等内容,欢迎点击下载。第2章 Web编..._html if elseppt课件
文章浏览阅读259次。您可以使用查询界面将搜索查询提交给 Solr 集合并分析结果。在下面截图中的例子中,查询已经被提交,并且界面显示了作为 JSON 形式发送到浏览器的查询结果。在这个例子中,genre:Fantasy 的查询被发送到 “films” 集合。表单中的所有其他选项都使用了默认值,下表中对此进行了简要介绍,本指南的后面部分将对此进行详细介绍。该响应显示在窗体的右侧。对 Solr 的请求只是简单的 HTTP..._solr查询界面
文章浏览阅读624次。使用pytorch时遇到下面的问题RuntimeError: split_size can only be 0 if dimension size is 0, but got dimension size of 2原因:训练的batch size 比使用的GPU数量少,导致上述问题。解决办法增加batch size数值,保证为GPU数量整数倍。参考:1.https://discuss.pytorch.org/t/concatenating-images/40961/10_split_size can only be 0 if dimension size is 0, but got dimension size of 1
文章浏览阅读7.3k次,点赞3次,收藏12次。一、架构简单概述 RabbitMQ消息队列服务善于解决多系统、异构系统间的数据交换(消息通知/通讯)问题,并且可以订阅和发布,而随着HTML5诞生的WebSocket协议实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据。 因此,我们可以使用RabbitMQ的订阅发布技术,订阅后,当RabbitMQ端有新的数据就直接发布到指定的queue,订_rabbitmq怎么返回给前端数据
文章浏览阅读320次。本文介绍了Excel导出的两种方式及成果展示_mendix实现excel导出
文章浏览阅读226次。文章来源:微信公众号”沥青路面“引 言众所周知,以水泥稳定碎石为代表的半刚性材料是中国目前使用最为广泛的基层材料,因为其力学性能优良、使用成本较低、原材料来源广泛和施工工艺简单等优点,水泥稳定碎石在未来十几年内仍将是中国使用最为广泛的基层材料。目前水泥稳定碎石在设计和施工方面存在一些问题,例如室内成型方式与实际道路受力状态存在一定差异;设计指标和施工检测指标相关性不足;对矿质石料级配的要求没有体现..._无侧限抗压强度与劈裂强度的的关系
文章浏览阅读1.5k次。编者按:本文来自稀土掘金江昪编译自 Github:0x5e/wechat-deleted-friends “ 清理下[微笑],不用回。你的朋友圈没事也该清清了,打开设置,通用,功能,群助手,全选,把我的信息粘贴一下,就可以了,发送就知道谁把你删了,方便你清人,不清不知道 ,一清吓一跳。” 相信大家在微信上一定被上面的这段话刷过屏,群发消息应该算是微信上流传最广的找到删除好友的方法..._微信出现brandsessionholder
文章浏览阅读1.5k次。MySQL存储过程 游标循环的使用_存储过程 重复定义同名游标 会覆盖吗?