移动web基础
初始缩小：布局视口大于视觉视口 初始放大：布局视口小于视觉视口
布局视口等于视觉视口（这种动作行为叫做理想视口）
<meta name="viewport" content="width=375" />
<meta name="viewport" content="width=device-width" /> <!-- 很少使用，不用考虑 --><meta name="viewport" content="height=375" /><!--initial-scale=1初始不缩放一定程度上等价width=device-width--><meta name="viewport" content="initial-scale=1" />由于兼容性，通常一起写也不麻烦（不禁止缩放）
<!-- 各有一些兼容性的问题，所以最好一起写 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />缩放
<meta name="viewport" content="initial-scale=2" />
<meta name="viewport" content="initial-scale=0.5" /><!--默认可以缩放user-scalable:yes--><meta name="viewport" content="initial-scale=0.5, user-scalable=yes" /> <meta name="viewport" content="initial-scale=0.5, user-scalable=no" /> <!--禁止缩放--><metaname="viewport"content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5"/> 由于兼容性，通常一起写也不麻烦（禁止缩放）
<!-- 如果禁止缩放 --><metaname="viewport"content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"/> 获取视口宽度
<script>// 获取视口宽度console.log(document.documentElement.clientWidth);console.log(document.documentElement.getBoundingClientRect().width);// 获取屏幕尺寸，或者获取屏幕的分辨率// 不推荐使用，有兼容性问题console.log(screen.width);</script>真机查看
vscode中打开html文件，通过ipconfig查询IP地址，并替换页面地址中的相应部分，关闭电脑防火墙，手机联机
开发中常用单位
px：绝对单位（当需要设置固定宽高时可用，也可用于设置字体大小）
%：可用来布局（相对单位，可用用来设置宽度，流体布局中会用到）
em：相对单位（设置字体大小时，1em=父元素字体的大小）（设置其他，比如宽高时，1em=自身字体的大小）一般用来控制行首的缩进text-indent
rem：相对单位（设置字体大小时，1rem=根元素字体的大小）
vw/vh/vmax/vmin 可以用来布局
1vw=视口宽度的1%
1vh=视口高度的1%
vmin=当前vw和vh中较小的一个值
vmax=当前vw和vh中较大的一个值
Flex弹性布局
设置display属性为flex或者inline-flex的元素称为弹性容器，弹性项目指的是设置该属性的子元素（注意不是后代元素哦）
Flex容器的属性
flex-direction主轴方向(行水平列垂直)：row row-reverse column column-reverse
flex-wrap换行形式(默认不换行)：nowrap wrap wrap-reverse
flex-flow(前2个属性结合体)：row wrap
justify-content(主轴水平对齐方式)：flex-start(左对齐) flex-end(右对齐) center space-between(flex项目两者间隔相等) space-around(flex项目左右间隔相等)
align-items(交叉轴对齐方式) ：stretch(flex项目没有设置高度或者设置高度为auto 自动撑开) flex-start(起点对齐) flex-end(终点对齐) center baseline(基线对齐)
align-content(多根主轴情况下交叉轴对齐方式)：stretch(多条主轴线平分Flex容器交叉轴空间)
Flex项目的属性
order：值越小越靠前显示，默认值0
flex-grow(定义Flex项目在主轴方向上的放大比例)：默认值0
flex-shrink(定义Flex项目在主轴方向上的缩小比例)：默认值1
flex-basis(定义在分配多余空间之前，Flex项目占据的主轴大小)：默认主轴大小等于宽度
flex(前3个属性合体)：auto(1 1 auto) none(0 0 auto)
align-self(允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圣杯布局</title><style>*{padding: 0;margin: 0;}body{/* flex容器默认为水平 */display: flex;/* 纵向排列 */flex-direction: column;height: 100vh;background-color: pink;font-size: 24px;}.header-layout,.footer-layout{height: 80px;}.header-layout{background-color: red;}.footer-layout{background-color: yellow;}.body-layout{/* 默认为0 如果有剩余空间就撑开 */flex-grow: 1;display: flex;}.main-layout{flex-grow: 1;background-color: gray;}.nav-layout{width: 200px;background-color: green;order: -1;}.aside-layout{width: 200px;background-color: lightblue;}.flex-center{display: flex;/* 主轴水平居中 */justify-content: center;/* 交叉轴垂直居中 */align-items: center;}</style>
</head>
<body><header class="header-layout flex-center">头部</header><div class="body-layout"><main class="main-layout flex-center">主体</main><nav class="nav-layout flex-center">导航</nav><aside class="aside-layout flex-center">侧栏</aside></div><footer class="footer-layout flex-center">底部</footer>
</body>
</html> 
vw和rem布局
根据视口宽度来调整字体大小
1rem等于html字体大小
{const docEl = document.documentElement;const setHtmlFontSize = () => {const viewWidth = docEl.clientWidth;docEl.style.fontSize = `${viewWidth / 75}px`;};setHtmlFontSize();window.addEventListener('resize', setHtmlFontSize, false);}优先使用 vw 布局方案，如果条件不允许（比如浏览器不兼容 vw），再选择 rem 方案
修改历史项目的时候，如果该项目使用的是 rem 布局，可以使用 vw + rem 方案修改
优化不用加js代码，而是使用vw+rem方案
/* 1.原理 *//* viewWidth / 750px = ?px / 10px *//* 100vw / 750px = ?vw / 10px *//* ?vw = 10px * 100vw / 750px *//* 2.实现 */html {/* font-size: 10px; *//* font-size: 10vw; *//* 10px * 100vw / 750px */font-size: 1.333333vw;}
相关文章：
移动web基础
初始缩小：布局视口大于视觉视口 初始放大：布局视口小于视觉视口 布局视口等于视觉视口（这种动作行为叫做理想视口） <meta name"viewport" content"width375" /> <meta name"viewport"…...
MyBatis和MyBatis_Plus有什么区别【面试常考题】
MyBatis和MyBatis_Plus的区别 MyBatis_Plus MyBatis_Plus 是一个 MyBatis 的增强工具，只是在 MyBatis 的基础上增强了却没有做改变，MyBatis-Plus支持所有MyBatis原生的特性，所有引入MyBatis-Plus不会对现有的MyBatis框架产生任何影响。 MyBa…...
华为OD机试用Python实现 -【统一限载货物数最小值】(2023-Q1 新题)
华为OD机试题 华为OD机试300题大纲统一限载货物数最小值题目描述输入描述输出描述说明示例一输入输出说明示例二输入输出说明Python 代码实现算法逻辑华为OD机试300题大纲 参加华为od机试，一定要注意不要完全背诵代码，需要理解之后模仿写出，通过率才会高。 华为 OD 清单查…...
Vue入门小练习
文章目录Hello VueVue文本指令Vue属性绑定Vue双向绑定Vue事件绑定Vue猜数字Vue简单计算器Vue简单计算器升级版Vue循环遍历Vue员工列表练习Vue小练习Vue显示隐藏相关使用一些简单的小案例来熟悉Vue的基本使用方法 Hello Vue <!DOCTYPE html> <html lang"en"…...
Oracle-09-集合运算符篇
2022年4月13日23:01:25 通过本章学习，您将可以:1、描述 SET 操作符2、将多个查询用 SET 操作符连接组成一个新的查询目录 🏆一、SET OPERATORS ⭐️1.1、UNION /UNION ALL ⭐️1.2、INSTERSECT ⭐️1.3、MINUS dz...
获取浏览器（服务端）请求中特定的Cookie
有必要解释一下HttpServletRequest接口，因为我们需要从它里面获取Cookie。 HttpServletRequest HttpServletRequest是一个Java接口，提供了访问HTTP请求信息的方法，例如HTTP方法、请求URI、头部、参数和会话属性。它是Java Servlet API的一部…...
c++11 标准模板（STL）（std::unordered_set）（九）
定义于头文件 <unordered_set>template< class Key, class Hash std::hash<Key>, class KeyEqual std::equal_to<Key>, class Allocator std::allocator<Key> > class unordered_set;(1)(C11 起)namespace pmr { templat…...
python实战应用讲解-【实战应用篇】文件操作（附python示例代码）
目录 知识储备 使用 python-libarchive-c 模块 创建压缩文件 解压文件 查看信息...
OpenCV-Python系列（二）—— 图像处理（灰度图、二值化、边缘检测、高斯模糊、轮廓检测）
一、【灰度图、二值化】 import cv2 img cv2.imread("lz2.png") gray_img cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # 灰度图 # 二值化，(127,255)为阈值 retval,bit_img cv2.threshold(gray_img, 127, 255, cv2.THRESH_BINARY) cv2.imshow(photo1,im…...
ccc-台大林轩田机器学习基石-hw1
文章目录Question1-14Question15-PLAQuestion16-PLA平均迭代次数Question17-不同迭代系数的PLAQuestion18-Pocket_PLAQuestion19-PLA的错误率Question20-修改Pocket_PLA迭代次数Question1-14 对于有明确公式和定义的不需要使用到ml 智能系统在与环境的连续互动中学习最优行为策…...
hadoop03-MapReduce【尚硅谷】
大数据学习笔记 MapReduce 一、MapReduce概述 MapReduce是一个分布式运算程序的编程框架，是基于Hadoop的数据分析计算的核心框架。 MapReduce处理过程为两个阶段：Map和Reduce。 Map负责把一个任务分解成多个任务；Reduce负责把分解后多任务处…...
测牛学堂：软件测试python学习之异常处理
python的捕获异常 程序在运行时，如果python解释器遇到一个错误，则会停止程序的执行，并且提示一些错误信息，这就是异常。 程序停止执行并且提示错误信息，称之为抛出异常。 因为程序遇到错误会停止执行，有时…...
图神经网络--图神经网络
图神经网络 图神经网络图神经网络一、PageRank简介1.1互联网的图表示1.2PageRank算法概述1.3求解PageRank二、代码实战2.1引入库2.2加载数据，并构建图2.3计算每个节点PageRank重要度2.4用节点尺寸可视化PageRank值一、PageRank简介 PageRank是Google最早的搜索引擎…...
React useCallback如何使其性能最大化？
前言 React中最让人畅谈的就是其带来的灵活性，可以说写起来非常的舒服。但是也就是它的灵活性太强，往往让我们忽略了很多细节的地方，而就是这些细节的东西能进行优化，减小我们的性能开销。可以说刚学React和工作几年后写React的代…...
长尾关键词使用方法，通过什么方式挖掘长尾关键词？
当你在搜索引擎的搜索栏中输入有关如何使用长尾关键词的查询时，你可能希望有简单快捷的方式出现在搜索结果中，可以帮助你更好地应用seo。 不过，这里要记住一件事：SEO 策略只会为你的网站带来流量；在你的产品良好之前&a…...
【网络编程套接字（一）】
网络编程套接字（一）理解源IP地址和目的IP地址理解源MAC地址和目的MAC地址理解源端口号和目的端口号PORT VS PID认识TCP协议和UDP协议网络字节序socket编程接口socket常见APIsockaddr结构简单的UDP网络程序服务端创建套接字服务端绑定字符串IP VS 整数IP客…...
shell脚本入门
实习的时候第一个月的考核就是如何部署一个云资源，当时走的捷径（杠杠的搜索能力hhhh）找到了一个shell脚本一键部署，后来被leader问起来就如实说了，leader问有没有看懂shell脚本中的逻辑……（没有࿰…...
【经典蓝牙】 蓝牙HFP层协议分析
HFP 概述 HFP概念介绍 HFP(Hands-Free Profile)， 是蓝牙免提协议， 可以让蓝牙设备对对端蓝牙设备的通话进行控制，例如蓝牙耳机控制手机通话的接听、 挂断、 拒接、 语音拨号等。HFP中蓝牙两端的数据交互是通过定义好的AT指令来通讯的。 &am…...
互联网摸鱼日报（2023-02-26）
互联网摸鱼日报（2023-02-26） InfoQ 热门话题 迁移工具 Air2phin 宣布开源，2 步迁移 Airflow 至 Dolphinscheduler 专访奇安信董国伟博士：目前开源安全的现状并不乐观，但其重要性已成各方共识 专访Brian Behlendorf&…...
关于程序员中年危机的一个真实案例
关于中年危机，网上已经有了各种各样的解读。但是，这两天一个学员跟我简单几句聊天，却触发了对于中年危机的另一种思考。如果你曾经也有点迷茫，或许你可以稍微花几分钟看下这个故事。 一、无奈的故事 39岁还出来面试&#x…...
【fly-iot飞凡物联】（2）：如何从0打造自己的物联网平台，使用开源的技术栈搭建一个高性能的物联网平台，目前在设计阶段。
目录前言1，fly-iot 飞凡物联2，mqtt-broker 服务3, 管理后台产品/设备设计4,数据存储目前使用mysql，消息存储到influxdb中5,规则引擎使用 ekuiper6, 总结和其他的想法前言 本文的原文连接是: https://blog.csdn.net/freewebsys/article/detail…...
Hadoop MapReduce
目录1.1 MapReduce介绍1.2 MapReduce优缺点MapReduce实例进程阶段组成1.3 Hadoop MapReduce官方示例案例：评估圆周率π（PI）的值案例：wordcount单词词频统计1.4 Map阶段执行流程1.5 Reduce阶段执行流程1.6 Shuffle机制1.1 MapReduc…...
时间复杂度和空间复杂度详解
有一堆数据需要排序，A要使用快速排序，B要使用堆排序，A认为自己的代码更高效，B也认为自己的代码更高效，在这种情况下，怎么来判断谁的代码更好一点呢？这时候就有了时间复杂度和空间复杂度。 目录 …...
【C++】面向对象---封装
【C】面向对象—封装 1.封装的意义 封装是C面向对象三大特性之一 封装的意义： 将属性和行为作为一个整体，表现生活的事物将属性和行为加以权限控制 封装意义一： 在设计类的时候，属性和行为写在一起，表现事物 语…...
Docker简介
一、介绍容器虚拟化技术（带环境安装的一种解决方案）打破程序即应用的观念，透过镜像image将作业系统核心除外，运用应用程序所需要的运行环境，由上而下打包，达到应用程序跨平台间的无缝接轨运作。Docker是基于…...
量化学习（一）数据获取
试验环境 windows10 AnacondaPyCharm（小白参考文章：https://coderx.com.cn/?p14） VM中安装MySQL5.7（设置utf8及相应配置优化） 关于复权 小白参考文章：https://zhuanlan.zhihu.com/p/469820288 数据来源 AK…...
java并发编程讨论：锁的选择
java并发编程 线程堆栈大小 单线程的堆栈大小默认为1M，1000个线程内存就占了1G。所以，受制于内存上限，单纯依靠多线程难以支持大量任务并发。 上下文切换开销 ReentrantLock 2个线程交替自增一个共享变量，使用ReentrantLock&…...
大数据框架之Hadoop：MapReduce（三）MapReduce框架原理——ReduceTask工作机制
1、ReduceTask工作机制 ReduceTask工作机制，如下图所示。 （1）Copy阶段：ReduceTask从各个MapTask上远程拷贝一片数据，并针对某一片数据，如果其大小超过一定阈值，则写到磁盘上，否则直…...
Nginx的介绍、安装与常用命令
前言：传统结构上(如下图所示)我们只会部署一台服务器用来跑服务，在并发量小，用户访问少的情况下基本够用但随着用户访问的越来越多，并发量慢慢增多了，这时候一台服务器已经不能满足我们了，需要我们增加服务…...
less基础
一、less介绍 1、介绍 是css预处理语言，让css更强大，可以实现在less里面定义变量函数运算等 2、less默认浏览器不识别 less转成csS (框架: less/sass 框架的内置了转码less-css) 3、使用语法 1.创建less文件xxx.less 后缀.less 2. less编译成css 再引入…...
网站免费网站免费片黄入口蜜桃观看射破屁屁/天津seo诊断技术
R-CNN，Fast R-CNN，Faster R-CNN这些是深度学习目标检测的鼻祖。看各种博客分析，东看看西看看，不系统。这里准备系统的记录一下深度学习目标检测的发展史。这里大部分摘录其他博客。参考链接见下。 R-CNN，Fast R-CNN&am…...
怎么建设境外网站/免费的网站推广在线推广
1065 单身狗 “单身狗”是中文对于单身人士的一种爱称。本题请你从上万人的大型派对中找出落单的客人，以便给予特殊关爱。 输入格式： 输入第一行给出一个正整数 N（≤ 50 000），是已知夫妻/伴侣的对数；随后 N…...
郑州建设企业网站/百度关键词优化软件网站
随机梯度下降（Stochastic gradient descent）和 批量梯度下降（Batch gradient descent ）的公式对比、实现对比 分类： 梯度下降 最优化2013-05-25 21:21 22978人阅读 评论(16) 收藏 举报梯度下降最优化迭代梯度下降&…...
做图标去什么网站找/站长工具端口检测
1444 “破锣摇滚”乐队 时间限制: 1 s空间限制: 256000 KB题目等级 : 白银 Silver题解题目描述 Description你刚刚继承了流行的“破锣摇滚”乐队录制的尚未发表的N(1 < N < 20)首歌的版权。你打算从中精选一些歌曲，发行M(1 < M < 20)张CD。每一张CD最多…...
建网站做seo/白帽seo
题目要求 将位置m的链接列表反转到n。 用一次通过遍历。 注意：1≤m≤n≤列表长度。 解题思路 有了反转链表的基础 解答leetcode 206. Reverse Linked List (翻转一个链表) 【剑指offer】 面试题24 翻转链表我们很容易对一个链表进行翻转的操作，那么如…...
免费的网站程序哪里好/公众号引流推广平台
Error ORA-03113: 通信通道的文件结尾进程 ID: 2232会话 ID: 1250 序列号: 这是oracle 报的错误， 可能这个03113这个编码的错误有很多。 但是要找到是什么原因就需要根据2232这个编码找到 这个日志文件 D:\app\Administrator\diag\rdbms\orcl\orcl\trace\orcl_ora_2…...