px：pixel像素的缩写，绝对长度单位，它的大小取决于屏幕的分辨率，是开发网页中常常使用的单位。 em：相对长度单位，在 `font-size` 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。如当前元素的字体尺寸未设置，由于字体大小可继承的原因，可逐级向上查找，最终
0821：Day16 响应式布局： 响应式布局： 响应式布局 特点： 面对不同的分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点： 媒体查询： 媒体查询：根据显示器的特性，为其设置CSS样式 1.媒体查询的语法： 1.内嵌式： 直接添加在自己的CSS文件里 @media all and (min-width:320
你还在用html2canvas软件进行截图吗？那你会遇到图片变糊了的问题，还有些样式方面的问题。 可以采取服务端截图的方式来解决上述问题哦。即puppeteer截取页面的DOM 说到服务端截图，大部分可能是采用puppeteer.goto("url路径")，这种方法的缺陷就是：当你的页面是有登录态的时候，截图结果会
适配原理 选择某个手机的尺寸大小作为基准，其他手机进行等比例缩放 一般选择 iPhone 6（2 倍屏幕），屏幕宽度为：375px 适配方式 rem：需要手动修改 html 元素的 font-size；额外设置 body 元素的字体大小为正常值 vw： 1 vw 等于屏幕宽度的 1% // rem 适配 // iphone6
#创建视图create view vw_stu as SELECT order_no,shipping_id,payment,product_name FROM mmall_order INNER JOIN mmall_order_item USING(order_no); #查看视图SELECT * FROM vw_stu; #查看视图结构desc vw_stu; #查看创建视图的语法show create view vw_stu; #定界符，以//开始d
移动端布局一般使用： 方法一：媒体查询 + rem + 弹性盒子布局 方法二：vw + rem + 弹性盒子布局 这里说一下vw原理： vw它是根据可视区的宽度来计算的 如果是10vw，就是当前移动设备(浏览器)宽度的十分之一大小 vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%） html { font-size: 31.25vw; /
Web移动端第六天 一、vw和vh 1.vw全称viewport width,意思是可视窗口的宽度. vw和之前的rem一样也是相对单位,rem相对的是html的字体大小,而vw相对的是屏幕大小计算结果. 1vw就是1/100的视口宽度. 2.vh全称是viewport height,意思是可视窗口的高度 1vh是1/100的视口高度. 注意:因
以下YEAR_VW Computing base， value symbol "0""1""2""3""4""5""6""7""8""9""A""B""C""D""E""F&quo
屏幕宽度发生变化，页面元素的尺寸（宽度和高度）也随之变化，这样可以更好的达到适配效果，用户体验更好 解决方案: 百分比布局或者 flex 完成整体元素排列布局 配合 rem 或者 vw/vh 单位 设置元素的尺寸（宽度/高度） 最终适配 em，rem 相同点： 都是相对单位 不同点：参照对象不同 em是相对当前
1.背景 在做移动端各种尺寸屏幕的适配时，用的最多的就是rem方案。我们都写过这样的代码,来设置根字体大小。这个计算公式中设备宽度，UI设计稿尺寸这两个参数比较好理解，可是为什么要除以100呢，为什么不是10,50或者其它的数值呢。 const setRem = () => { const deviceWidth = do
vw就是view width,可视宽度,所以一般来说都是可是窗口的一半. 百分比的宽度,就是自己父元素宽度的一半了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"
1、像素和视口 1.1 像素： 物理像素：分辨率数 css像素：编写网页时，所用都是css像素 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现 ， 一个css像素最终由几个 物理像素显示，由浏览器决定： 默认情况下在pc端，一个css像素 = 一个
不熟悉的知识点 知识点1： rem的作用:rem适合于移动端适配和制作全屏效果，例如设计图的宽度与屏幕宽度进行适配。页面以及页面内容随屏幕宽度变化而变化。 如何设置rem:1rem的大小是等于html下的font-size，所以可以通过设置这个css属性告诉浏览器rem的大小 html{ font-size:10px
使用: vue2, vant2 功能点： qs1: 前端上传图片并展示 an1: 上传file格式图片转为base64格式 qs2: 要将上传的图片在宽高固定的窗口里显示完整 an2: 把获取的base64的图片链接，赋值到image的src上，然后获取到图片的宽高比例；再与窗口宽高比例对比，选择以高占满还是以宽占满。
来到重点-flex布局 首先了解一下移动端的特点 pc端和移动端的不同 PC端 屏幕大，网页固定版心浏览器繁多，更多考虑兼容性问题。（布局： 浮动+定位+标准流） 移动端 手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度移动端则基本不需要考虑兼容性问题，可以放心大胆使用CSS新特性 物理
px 最常用，相对屏幕的分辨率而言的相对单位 % 一般相对父元素而言 em，rem em相对父元素的font-size rem相对根元素（html）的font-size vw，vh vw相对屏幕可视区域的宽度而言，若屏幕宽1000px则1vw=1000 / 100 = 10px vh相对屏幕可视区域的高度而言，和vw同，高度 / 100 vm，vmin，vmax vm
TailwindCSS/WindiCSS提供大量默认样式，可自定义样式，只用写html就可快速完成开发，适合官网等pc端项目，如果注重样式细节交互、大量自定义样式的长期项目，并不合适。 我们移动端建议用vw+与postcss插件，曾经有bug公众号原文章的rem与我们的rem冲突，vw方案缺点大屏时没有缩小方案。
px：根据屏幕分辨率来进行变化的。 pt：物理长度单位，指的是72分之一英寸。 em：根据父字号变化的，理论上也遵循冒泡原则。 rem：根据根字号来变化的。 rpx：微信小程序新推出的一个单位，更有利于移动端的开发。 vw：1vw等于视口宽度的1%。 vh：1vh等于视口高度的1%。 vmin：选取vw和vh中最小的那个
vue pc 端和移动端响应式布局 源码: https://gitee.com/hellojinjin/vue-flexible-layout.git 技术栈： postcss-px-to-viewport 媒体查询 flex 布局 ui 组件(element-ui tabs 组件) 安装 postcss-px-to-viewport npm install postcss-px-to-viewport 根目录新建 postcss.config.
vh（Viewport Height）是前端开发中的一个动态单位，是一个相对于网页视口（Viewport）的单位。（与vh一起的还有vw（Viewport Width）） 在桌面端，视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。系统会将视口的高
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu
meta标签的设置 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 当网站添加到主屏幕快速启动方式，可
首先我们看个例子。 #include <iostream> #include <vector> #include <algorithm> #include <iterator> using namespace std; class Widget{ public: Widget(int a) : m_a(a) { } int value() const { return m_a; } bool test() { retu
vue 插件：postcss-px-to-viewport （布局换算插件） postcss.config.js module.exports = { plugins: { // ... 'postcss-px-to-viewport': { unitToConvert: 'px', viewportWidth: 750, unitPrecision: 5,
移动端适配 rem适配 rem是相对于根元素的字体大小的单位，也就是html的font-size大小，浏览器默认的字体大小是16px，所以默认的1rem=16px，我们可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。 事实上 rem是把屏幕等分成 指
