一 rem方案原理 将每个不同屏幕划分相同的等分，让同一个元素占有相同的比例 例如： 屏幕为500px,分为10份，那么一份是1rem=50px； 屏幕为1000px,分为10份，那么一份是1rem=100px 二 用法 在浏览器中默认的字体高度是16px，默认是1em=16px；16*62.5%=10px； // EM 1em是相对自身而言的，会
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>em和rem</title> <style> .box { color: red; font-size: 100px;
淘宝移动端适配 像素 物理像素就是屏幕最小发光点，RGB红绿蓝组成一个发光点即一个物理像素 PC上，一个逻辑像素(CSS)像素，等于一个物理像素 但是在移动端的高分屏上，一倍屏下一个物理像素等于一个逻辑像素 二倍屏幕下。一个逻辑像素等于二倍物理像素(四个物理像素点) 以此类推 当设置不
一、安装px2rem插件 浏览器默认1rem = 16px,在这里可以修改默认值为100,以Phone 6/7/8 尺寸作为参照，原因在步骤二中。 二、在根元素中设置font-size 参照iPhone 6/7/8 尺寸，宽度为375px，给出计算公式：calc(100vw/3.75)。 因为 1vw = 1/100*视口宽度，所以：视口宽度 = 100 v
前言：上篇我们提到了相对单位em的用法，知道了em的概念，即是一个相对的单位，也知道了em的值不是固定的，p标签里的em和p里面的div下面的1em的px值并不是一样的。具体是多少呢？那就得看一下父级元素的值了，本级元素的px值随着父级元素的变化而变化的，“进制”是浏览器的默认值（16px）;和em对
Bootstrap 开源了首套 SVG 图标库 Bootstrap Icons，其团队表示这是有史以来第一次拥有自己的图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建，现在可以免费用于任何项目，无论此项目是否使用了 Bootstrap。 查看 Bootstrap Icons »https://icons.getboo
vue v-for循环数据点击父div，里面得子元素样式改变： html： <div class="timeRoomFloorCont" v-for="(item,index) in dormitory" :key="index" @click="clickDormitory(item,index)" :class="{timeRoomFloorCont1:classi===index}">
rem rem是相对长度单位、相对根元素（既html元素）font-size计算值的倍数的一个css单位，fontsize=100px=1rem，也就是我们前端常说的设配单位rem 例如： 设计稿宽度：600px 移动设备：600px 设置html的 font-size= 移动设备 / 设计稿宽度 * 100 = 100px，那么 1rem = 100px function rem(){
css3规定：1rem的大小就是根元素html的font-size的值。 通过设置 根元素<html>的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等， 根据移动设备的宽度大小来实现自适应，不同的设备都展示一致的页面效果。 rem宽度比例 设计稿宽度 首先: 1rem =
<template> <div class="pay-wrap"> <fed-navbar v-if="!elongFlag" :left="[{'tagname':'tag_click_back'}]" :center="[{'value': payTitle}]" :call
网格布局 .wrapper{ 列宽 display:grid; grid-template-columns:70% 30% 40%; grid-column-gap:1rem; grid-row-gap:1rem; grid-gap:1rem; } .wrapper{ display:grid; grid-template-columns:1fr 2fr 1fr; grid-template-columns:repeat(3,1fr); 间距 grid-gap:1rem; 行高 grid-au
前言 有过移动端开发经验的人都知道，ios跟android页面的 像素(px)密度 不一样。这就有点尴尬了，因为在android这边一个div 180px刚刚好，但是去了ios那边可能就不一样了，可能会造成页面变得扭曲。为了解决这个问题，救星——rem出现了。它的值默认是1rem == 16px,这样子的话计算起来就
在写前端页面的时候经常会用到rem,也在网上看了别人对rem的介绍，详细的情况就不在此描述，只说一下我对rem的看法和用法。 在我看来，rem 是一种相对的尺度，相对于根元素设置的font-size，比如： html { font-size: 16px; } 那么，在别的地方使用rem的时候 1rem 就会等于 16px。这算是对rem
布局 对象属性 new Person('') 原型链 (创建对象.使用对象中的属性，如果没有那么就去原型找) new Person() Person{ name:'', getname(){ }} 定义一个构造函数 __Prototype__ {setName（）} p = new Person().setName() 移动端设
js五子棋 过程很艰辛，请教了很多人，网查了资料，终于和自己玩上了五子棋。 <!DOCTYPE html> <html> <head> <title>五子棋</title> <meta charset="UTF-8"> <style> html,body,section,div,p{ padding: 0; margin: 0; font-size: 12px; }
之前做PC端网页一直不知道如何去做屏幕适配，特意去搜，看到一篇文章后豁然开朗，先奉上链接。 PC端适配屏幕尺寸 - 瓦力博客 详细的可以去看文章，我在这里只做一下简单总结。 How to do 假定设计稿宽度为 1600px，某个box设计稿宽度为400px。 html { font-size: 16px; // 设计稿宽度/10
插件链接https://github.com/ustbhuangyi/better-scroll 安装Better-scroll npm install better-scroll --save 这是Better-scroll插件结构要求，所以我们要在list下还要添加一个总div使其成为此格式 <div class="wrapper"> <ul class="content"> <li>...</li>
举例以iphone6为标准，设计图宽是750px，页面上的话是375(需要除2)来计算，在公共样式内设置font-size为50px，这是为什么。 比如量到的宽是100px， 因为移动端布局使用的是rem布局，但rem解决不了放大缩小的问题。首先说下font-size:50px;，是为了避免除以2的计算。100px相对于50px的rem值是1re
