rem

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

阅读更多关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

弹性布局(em布局/rem布局) em和rem的区别在了解弹性布局前我们需要先知道em和rem rem： font size of the root element， rem是相对于根元素<html>来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。 em：以父节点font-size大小为参考点，标准不统一，容易造成混乱 em/rem与px的换算浏览器的默认字体高度一般为 16px ，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。 html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

阅读更多关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　 PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。　在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？ ) 　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem ）　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见 content"width=640

px、em、rem和%的定义

阅读更多关于 px、em、rem和%的定义

1.px（像素） px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。 2.em（相对长度单位） em单位用的也比较多，特别是国外；em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，相对于父级元素对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸（16px）。 3.rem（css3新增的相对长度单位） rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题， rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。 4.%（百分比） %也很常见，它和em差不多一样，都是相对于父级元素。但%可以在很多属性中使用，比如：width、height、font-size等。而em是用来设置字体大小（font-size）的单位，width、height等属性是没有em单位的。二、px、em、rem和

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

阅读更多关于静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

㈠概念 ⑴ 静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。针对不同分辨率的手机端，分别写不同的样式文件。例如：浏览器窗口是1000px，那么最小的宽度是900px或其他px,只要浏览器缩小过这个最小值就不会自动化的调整。 ⑵ 自适应布局：创建多个静态布局，每个静态布局对应一个屏幕分辨率范围，使用@media媒体查询技术。但是字体不会改变 ⑶ 流式布局：rem布局+viewport;元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。屏幕尺度跨度过大的情况下，页面不能正常显示。比如，对移动端来说不错 ⑷ 响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。 ⑸ 弹性布局：要点在于使用 em和rem单位来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于弹性布局的尺寸主要根据字体大小而变化。㈡布局特点 ⑴静态布局：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 ⑵自适应布局：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。 ⑶流式布局：屏幕分辨率变化时

阅读更多关于 rem

通过sass动态设置rem ex: js文件： let htmlWidth = document.documentElement.clientWidth || document.body.cilentWidth; // 获取视窗高度 let htmlDom = document.getElementsByTagName('html')[0]; htmlDom.style.fontSize = htmlWidth / 10 + 'px'; // console.log(htmlWidth,htmlWidth / 10); //动态修改font-size window.addEventListener('resize',()=>{ let htmlWidth = document.documentElement.clientWidth || document.body.cilentWidth; let htmlDom = document.getElementsByTagName('html')[0]; htmlDom.style.fontSize = htmlWidth / 10 + 'px'; }) 在vscode中编写sass文件： @function px2rem($px) { $rem:37.5px;/* 基准值iphon6 375/10 */ @return ($px /

华为手机的部分兼容rem

阅读更多关于华为手机的部分兼容rem

问题 : 使用rem写宽度的时候, 明明宽度算的很好( 可能原因是①我写的宽度左浮动留余地的不多,写的太撑了 ;②1px的border的原因), 本来苹果三星宽度都没问题, 公司测试机没大屏华为, 同事手机在项目上线的时候不知道竟然出问题了.... 查了一下发现一直都有点问题解决: ① 重新改写样式,宽度别定死, 如果左浮动的时候, 左边定margin,右边就别给margin值了 ② 参考这个看看以后有用没, 因为这个手机不好借, 以后有的话可以参考以下的看看版权声明：本文为CSDN博主「_Jester」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_41049816/article/details/82178816 来源： https://www.cnblogs.com/wangduojing/p/11588899.html

Batch批量替换hosts

阅读更多关于 Batch批量替换hosts

hosts文件替换工作需要,要修改很多计算机的hosts文件,采用bat批量完成解决的问题: 1.pc工作在非管理员权限,右键管理员权限太麻烦,因此采用执行中申请管理员权限的方式 2.hosts和替换脚本放在某台pc机上,其他pc以共享文件夹的方式访问,但cmd命令行无法将UNC路径作为当前目录,这样就不方便识别和脚本同目录的hosts文件. 3.执行备份替换前,要先新版hosts文件是否和Batch文件在同一目录,防止错误操作. 4.不管文件是否完成更新,都需要给出提示,并且自动关闭终端. 对于问题1,参考 https://blog.csdn.net/lijialong1313/article/details/54171535 对于问题2,参考 https://www.jianshu.com/p/2d3190f592c5 对于问题3,参考 https://blog.csdn.net/qq_39720249/article/details/85067931 对于问题4,采用如下方法替换成功黑色背景绿色文字,窗口7秒后自动关闭不成功黑色背景红色文字,窗口不会自动关闭 bat文件申请管理员权限的方法百度上有好几种,我随便选择了一种附上我使用的代码 @echo off title hosts文件替换 REM _________________________________

rem布局

阅读更多关于 rem布局

Rem布局 em em：也是一种像素单位，1em的大小是由他的父级元素的字体大小决定 rem rem：也是一种像素单位，1rem的大小由网页的根节点html的字体大小决定设计稿750 宽为7.5rem 可以铺满来源： https://www.cnblogs.com/qq1137674424/p/11555313.html

P3806 【模板】点分治1

阅读更多关于 P3806 【模板】点分治1

模板*0x3f3f3f3f 代码： #include <bits/stdc++.h> using namespace std; const int maxn=500005; const int inf=0x3f3f3f3f; int n,m,a,b,c,ask[maxn]; bool have[maxn*20],can[maxn],vis[maxn]; vector<int> g[maxn],v[maxn]; int sum,sz[maxn],son[maxn],rt; int rem[maxn],dis[maxn]; queue<int> q; void getrt(int x,int f){ sz[x]=1,son[x]=0; for(int i=0;i<g[x].size();++i){ int y=g[x][i]; if(vis[y]||y==f) continue; getrt(y,x); sz[x]+=sz[y]; son[x]=max(son[x],sz[y]); } son[x]=max(son[x],sum-sz[x]); if(son[x]<son[rt]) rt=x; } void getdis(int x,int f){ rem[++rem[0]]=dis[x]; for(int i=0;i<g[x].size();++i){ int y=g[x][i];

移动端rem，vw,vh,百分比布局

阅读更多关于移动端rem，vw,vh,百分比布局

PC端的px布局一般都会写死固定宽高或者用min-width，max-width这种方式去做不同屏幕分辨率适配，而移动端的布局要复杂的多。不同手机的宽高比例和屏幕尺寸都不太一样，所以需要各种布局方式去适配 1.首先说rem布局，rem单位属于一个相对单位，也就是相对于根元素的HTML里的font-size，一般来说根元素的font-size浏览器默认都为16px,也就是说，这个时候你在利用rem布局的时候，你的1rem则是16px 这样的话导致在设计元素尺寸的时候非常不好计算，那么我们就可以在HTML的初始css时设置一个根元素font-size，但是有些浏览器，比如谷歌，默认字体大小不得小于12px,而且在移动端的浏览器进行浏览时用户为了个人习惯有的时候也会设置浏览器的字体大小，所以说在HTML中设置的根元素font-size更多是为了开发者便于计算页面元素尺寸，为了维持浏览器默认大小，在body里，一样要设置回font-size为16px 这样你在进行该网页编辑的时候就不会影响到浏览器的默认字体 2.vw,vh,百分比布局，vh,和vw是两个相对单位，视窗的宽度的百分之一就是1vw,vh同理，这个时候可能会产生疑惑，那么vh和vw不就和百分比是一样的，并不是，百分比的话是相对于当前元素的父元素的百分比而vh和vw一直是相对于当前视窗的一个单位长度，那么视窗是什么呢

订阅 rem