rem

移动端完美适配方法

北战南征 提交于 2020-01-14 00:02:39
采用 vw + rem rem (font size of the root element)是指相对于 根元素 的 字体大小 的单位。 vw 是可视窗口的宽度单位,不受设备分辨率影响, width: 1vw = width: 1%。倘若 浏览器宽1000px,1vw = 10px 移动设备的原型图一般都是二倍图(宽750px) // 750/7.5 = 100 即 1rem = 100px,原型图上的 px单位 都除以100 单位换成rem即可 // 除数不设置成 75 ,是因为有的浏览器最小font-size 为 12px,小于12以12处理,会造成偏差 html { font-size: calc(100vw/7.5); } 来源: CSDN 作者: CherryCola_zjl 链接: https://blog.csdn.net/CherryCola_zjl/article/details/103962430

react实现适配vw vh rem

拥有回忆 提交于 2020-01-13 05:33:03
首先下载一个sass-resources-loader插件: npm install sass - resources - loader -- save - dev 创建一个文件: @ function vw ( $px ) { @ return ( $px / 1920 ) * 100 vw ; } @ function vh ( $px ) { @ return ( $px / 1075 ) * 100 vh ; } @ function rem ( $px ) { @ return ( $px / 100 ) * 1 rem ; } 这是个人适配内容,然后我们需要把这个引入所有的scss文件, 找到node_modules\react-scripts\config\webpack.config.js文件中的 { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'sass-loader' ) } 在其后面添加 concat([ { loader: "sass-resources-loader", options: { resources: path

Rem.js

那年仲夏 提交于 2020-01-11 10:08:08
750 代表设计稿的宽度; 100 代表换算比例,写100是 为了好计算;比如,一个元素的宽度是100px,就可以写1rem,以及1px=0.01rem // rem 前端自适应代码 (function (win) { let doc = win.document, docEl = doc.documentElement, timer = null; function refreshRem() { // ele.getBoundingClientRect() 返回元素的大小及其相对于视口的位置。 let width = docEl.getBoundingClientRect().width; if (width > 750) { // 最大宽度, 750为设计稿的宽度 docEl.style.fontSize = '100px'; }else{ var rem = width / 3.75; docEl.style.fontSize = rem + 'px'; } } win.addEventListener('resize', function () { clearTimeout(tid); timer = setTimeout( refreshRem , 300); }, false); win.addEventListener('pageshow', function (e)

移动端适配插件(flexible.js)

爱⌒轻易说出口 提交于 2020-01-11 01:45:35
移动端适配插件(flexible.js) Sublime Text3 安装插件 安装 cssrem 下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录(在Sublime安装目录下找文件夹):Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。 配置参数 { "px_to_rem": 40, //px转rem的单位比例,默认为40 "max_rem_fraction_length": 6, //px转rem的小数部分的最大长度。默认为6。 "available_file_types": [".css", ".less", ".sass",".html"] //启用此插件的文件类型。默认为:[".css", ".less", ".sass"] } 经计算 px_to_rem的比例值是设计稿的宽度/10。即如果设计稿宽640,则px_to_rem值应该为64 / 如果设计稿宽640,则px_to_rem值应该为75 如果没有变化:修改 cssrem.py 文件 SETTINGS['px_to_rem'] = settings.get('px_to_rem', 75) 使用

HTML5移动端实现自适应

隐身守侯 提交于 2020-01-10 11:41:00
1. 添加meta标签:viewport <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 2. 将下面代码添加到需要的页面中: 1 (function flexible (window, document) { 2 var docEl = document.documentElement 3 var dpr = window.devicePixelRatio || 1 4 5 // adjust body font size 6 function setBodyFontSize () { 7 if (document.body) { 8 document.body.style.fontSize = (12 * dpr) + 'px' 9 } 10 else { 11 document.addEventListener('DOMContentLoaded', setBodyFontSize) 12 } 13 } 14 setBodyFontSize(); 15 16 // set 1rem = viewWidth / 10 17 function setRemUnit () {

windows bat脚本实现ftp自动下载 删除

◇◆丶佛笑我妖孽 提交于 2020-01-09 23:57:27
现在有一个需求就是把远程某个文件下面的图片,下载到本地,并且删除下载成功的的文件,而且远程目录下的那个图片会随时增加。假设一下如果所有的脚本都写好了,那么就需要调用windows上的计划任务定时执行脚本就ok了,Linux上利用cronjob 同样可以做到。大体的实现思路如下,当然了不止这一种方式。 在远程服务器上搭建ftp server ,例如这里在远程服务上的 images 作为下载目录。搭建ftp server 最简单的方式就是用FileZilla Server 这个工具去搭建,很方便,零配置。 在client端编写 脚本,首先实现可以从远程服务器上下载,其次再把下载成功的文件到远程服务器上进行删除,这里的细节需要注意: a.首先把下载完成的文件的列表写入到一个临时文件中 例如文件 filelist.tmp,同时把下载到临时目录中的文件移动到一个一个正式目录 例如 download 目录 b.其次删除文件的时候就按照这个 filelist.tmp 文件中文件list, 由于因windows下不能直接将参数传给ftp脚本函数,所以删除文件就采用分批删除,例如一次删除 10个文件,当然这个你可以自己零活控制 , 这里主要用到了ftp 命令中的 mdelete 这个方法,同时可以删除多个文件。 3. 然后根据你的需求,把这个脚本添加到任务计划中。 这个程序包含 2个 脚本

用批处理文件自动备份文件及文件夹,并自动删除n天前的文件

☆樱花仙子☆ 提交于 2020-01-09 05:02:53
原文: 用批处理文件自动备份文件及文件夹,并自动删除n天前的文件 ---恢复内容开始--- 下是备份的批处理,添加到"计划任务"中,设定时间自动运行 复制代码 代码如下: @echo off rem 格式化日期 rem date出来的日期是"2006-02-22 星期三",不能直接拿来使用,所以应该先格式化一下 rem 变成我们想要的。date:~0,4的意思是从0开始截取4个字符 set d=%date:~0,4%%date:~5,2%%date:~8,2% rem 设定压缩程序路径,这里用的是WINRAR的rar.exe进行打包的 set path=C:\Program Files\WinRAR rem 设定要备份的目录 set srcDir=D:\databasc rem 设定备份文件所在目录 set dstDir=E:\temp\backup rem 设定备份文件的前缀,目前为temp,前缀为backup set webPrefix= rem 如果文件不存在,开始备份 if not exist %dstDir%%webPrefix%%d%.rar start Rar a -r %dstDir%%webPrefix%%d%.rar %srcDir% @echo on 以下是删除N天前备份文件的批处理,注:在windows2003下,如XP下因为没有forfiles.exe

用批处理文件自动备份文件及文件夹,并自动删除n天前的文件

廉价感情. 提交于 2020-01-09 01:55:01
---恢复内容开始--- 下是备份的批处理,添加到"计划任务"中,设定时间自动运行 复制代码 代码如下: @echo off rem 格式化日期 rem date出来的日期是"2006-02-22 星期三",不能直接拿来使用,所以应该先格式化一下 rem 变成我们想要的。date:~0,4的意思是从0开始截取4个字符 set d=%date:~0,4%%date:~5,2%%date:~8,2% rem 设定压缩程序路径,这里用的是WINRAR的rar.exe进行打包的 set path=C:\Program Files\WinRAR rem 设定要备份的目录 set srcDir=D:\databasc rem 设定备份文件所在目录 set dstDir=E:\temp\backup rem 设定备份文件的前缀,目前为temp,前缀为backup set webPrefix= rem 如果文件不存在,开始备份 if not exist %dstDir%%webPrefix%%d%.rar start Rar a -r %dstDir%%webPrefix%%d%.rar %srcDir% @echo on 以下是删除N天前备份文件的批处理,注:在windows2003下,如XP下因为没有forfiles.exe,未测试拷贝2003的文件到XP的system32目录

移动端适配思路浅析

女生的网名这么多〃 提交于 2020-01-06 22:54:09
本文主要讲了一些移动端适配的基本思路和一些代码示例,并没有讲解具体的移动端适配的方案,主要从为什么这么做出发讲了一些自己粗浅的理解。 所谓移动端适配,就是页面运行在移动端并且会根据当前运行的移动端设备的大小自行进行调整。 实现移动端适配可以按照以下思路出发, 首先要将 viewport 的宽度等于设备的宽度,即 <meta name= "viewport" content="width=device-width initial-scale=1.0"> 通过 rem, media query 等方式改变不同设备上元素的大小 rem 是一个相对单位,一般 1rem = html设置的 font-size 的值。 关于 rem 的详细介绍可以参考 移动 web 开发适配秘籍 Rem 这个免费课程。 通过设置不同设备 html 的 font-size 改变 rem 的值,令 1rem 单位的值随着设备的增大而增大。 media query 可以判断当前是什么设备,然后根据不同的设备设置不同的样式。 在设计上还要做一些事情,例如 隐藏:将 PC 端将一些不重要的内容(如友情链接等)在移动端直接隐藏掉 折行:在 PC 端显示在一行的内容在移动端可以显示几行(这一点上设置了 meta 标签后会自动帮你做,也可以在此基础上自己手动设置一些样式实现折行的效果) 自适应

关于手机端适配的问题(rem,页面缩放)

柔情痞子 提交于 2020-01-05 05:11:11
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端的时候,如果想引用别的UI库的时候,自己页面写的是rem单位,而ui库的css里面写的是px,大家都知道,rem是在html上设置font-size 字体大小。然后,,然后ui库的里面的px 会和 rem冲突,很麻烦,搜了很多办法都没找到好的解决办法!!! rem的做法 (function() { var doc = document, win = window; var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if(!clientWidth) return; //如果屏幕大于750(750是根据我效果图设置的,具体数值参考效果图),就设置clientWidth=750,防止font-size会超过100px if(clientWidth > 750) { clientWidth = 750 } /