<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib
键盘事件 一. 1.keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件 2.keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。 3.keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。 二. 简单示例： <!DOCTYPE htm
1.使用lib-flexible动态设置REM基准值(html标签的字体大小) npm i amfe-flexible 然后在main.js引入它 // rem适配 import 'amfe-flexible' 2.使用postcss-pxtorem将px转为rem // 指定版本安装，安装最新版本会有报错几率 npm i postcss-pxtorem@5.0.0 -D 然后在根目录下创建一
分为三种情况 知道展开的最大高度，并且展开区域影响其他元素布局 解决方案：设置max-height为具体数值，百分比，px均可 知道展开的最大高度，并且展开区域不影响其他元素布局 解决方案：设置position为absolute，并且max-height为具体数值，百分比，px均可 不知道展开的最大高度 解决方案
这里不考虑大屏,所以不做amfe-flexible的配置 首先是安装依赖 yarn add postcss-loader postcss-pxtorem -D yarn add autoprefixer -D 然后新建postcss.config.js文件 module.exports = { 'plugins': { 'autoprefixer': { overrideBrowserslist: [ 'And
3.开始安装 进入设置，申请js权限(大概隔了3个小时审核就通过了) 选择博客皮肤--"SimpleMemory" 复制大佬github项目上的代码 复制src/style/base.min.css代码-->"页面定制CSS代码"处,然后勾选"禁用模板默认CSS"； #EntryTag, #blogTitle h1 { margin-top: 20px }
vue 插件：postcss-px-to-viewport （布局换算插件） postcss.config.js module.exports = { plugins: { // ... 'postcss-px-to-viewport': { unitToConvert: 'px', viewportWidth: 750, unitPrecision: 5,
注:由于暂时不能上传gif，而且动画制作着实有点粗糙，新手，大家不喜勿喷。 该动画是直接设置的页面一开启，就实现。 如果想在点击事件中实现，可以利用js代码进行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X
目录 CSS 单位 绝对长度 相对长度 em的计算标准 rem的计算标准 网页中字体大小的设置 UI设计师的原因 浏览器的原因 实际应用 总结：需要知道em 和 rem的计算方式 CSS 单位 CSS 有几个不同的单位用于表示长度。一些设置 CSS 长度的属性有 width, margin, padding, font-size, bor
1、postcss-pxtorem 介绍： 一款可以把px单位转成rem的插件，具体使用方法可以点击上方链接。 // postcss.config.js module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, unitPrecision: 5, propList: ['font', 'font-size', �
title : { show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏） text: '主标题',//主标题文本，'\n'指定换行 link:'',//主标题文本超链接,默认值true target: null,//指定窗口打开主标题超链接，支持'self' | 'blan
upx(rpx)转换px var value = uni.upx2px(20); //20是20upx/20rpx,在iPhone 6的机型时，value为10px px转换upx(rpx) var value= 10/(uni.upx2px(100)/100);//10是10px的值
安装依赖 npm install postcss-write-svg postcss-px-to-viewport-multichange --D 直接在根目录下创建postcss.config.js module.exports = { plugins: { // autoprefixer: {}, // cssnext中启用 // 'postcss-import': {}, // 'postcss-url'
<script> let button = document.querySelector('button'); //获取按钮 let body = document.getElementById('body'); //获取body元素 button.onclick = function () {
选区主要设计 Selection 的 UISelection 的 Rect(width,height) 变化Selection 的 Position 变化在浏览器的 DOM 中，Selection 在鼠标点击位置的垂直线右侧变化于左侧变化的计算 Demo 演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta h
相信在座的各位都有见过大部分的应用打开的时候都会有个全屏的广告。 但是小程序的会比较少一点，因为小程序打开加载的时候已经需要消耗不少时间了，所以基本都不会去做这个，影响用户的体验。 最近有个客户要做这个，于是折腾了一下。 注意：因为市面上有各种各样的手机，所以我们一定要适配
插件：postcss-px-to-viewporthttps://www.npmjs.com/package/postcss-px-to-viewport 简介 将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件. 如果你的样式需要做根据视口大小来调整宽度，这个脚本可以将你CSS中的px单位转化为vw，1vw等于1/100视口宽度。 PC、移动
一、实现原理 方法一：准备一张高像素的大图，当鼠标放到原图上，加载显示大图的对应位置。 首先，需要一个img元素显示原图对象，还需要一个容器作为显示框；显示框里面存放大图对象。当鼠标移动到原图上时，通过对大图进行绝对定位来显示对应的部位，实现类似放大镜的效果。 二、使用mousemove事
图片放大镜： $(function(){ //图片放大镜 $(".small_box").hover(function(){ $(this).find(".float_layer").show(); $(".big_box").show(); },function(){ $(this).find(".float_layer").hide(); }
代码： function(e){}); 需要把e传值 left top 小黑框的左上角位置,-100是保证鼠标永远在小黑框的中间 top : -2 * top + "px", left : -2 * left + "px", -2移动的比例
轮播图 $(".points-list>li").eq(current).addClass("active").siblings().removeClass("active"); 当前的图片加上active类名，其他图片li移除这个类名 定时器 var timer=setInterval(()=>{ next(); },3000); siblings元素的同胞 closest找到父节点
function scalScreen() { let docEl = document.documentElement; let scale = $(window).width() / 1920; let _width, _height; window.clientWidth = docEl.clientWidth; window.clientHeight = docEl.c
代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>键盘事件</title> <style> *{ margin:0px;
目标 使用vw布局方案，实现视口宽度不同，网页元素宽高等比缩放效果 vw和vh基本使用 vw和vh为相对单位，相对视口尺寸计算结果 1vw = 1/100视口宽度 1vh = 1/100视口高度 布局流程 根据设计稿确定1vw尺寸 px单位转换成vw单位尺寸 px / (1/100视口宽度)
<template> <div class="shop_cart"> <div class="add"> <div class="ul"> <div> <button @click="addShopCart($event)">添加到购物车</button> </div> <div>
