什么是rem?

rem是相对于根元素html字体大小来计算的,即( 1rem = html字体大小 )

rem和em区别?

rem:(root em,根em)根元素的fort-size的大小计算
em:相对长度单位,相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被设置,则相对于浏览器的默认字体尺寸。 em 的值并不是固定的, em的值会继承父级元素的字体大小。

rem手机端方案特点?

  • 所以手机端显示界面比例都一样,只是大小不同
  • 1 rem==html fort-size ==viewport width
  • 在线转换工具: http://pxtoem.com/

JS动态调整REM

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>')
</script>

REM 可以与其他单位同时存在

 font-size: 16px;
border: 1px solid red;
width: 0.5rem;

在 SCSS 里使用 PX2REM

  • npm config set registry https://registry.npm.taobao.org/

  • touch ~/.bashrc

  • echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"'>> ~/.bashrc

  • source ~/.bashrc

  • npm i -g node-sass

  • mkdir ~/Desktop/scss-demo

  • cd ~/Desktop/scss-demo

  • mkdir scss css

  • touch scss/style.scss

  • start scss/style.scss

  • node-sass -wr scss -o css

    编辑 scss 文件就会自动得到 css 文件

    在 scss 文件里添加

    @function px( $px ){
    @return $px/$designWidth*10 + rem;
    } $designWidth : 640; // 640 是设计稿的宽度,你要根据设计稿的宽度填写。 .child{
    width: px(320);
    height: px(160);
    margin: px(40) px(40);
    border: 1px solid red;
    float: left;
    font-size: 1.2em;
    }

    即可实现 px 自动变 rem


屏幕适配布局问题

响应式布局
流式布局+媒体查询
  • 用来解决不同宽度的布局问题,父级宽度不够的时候,子级节点会“挤下去”
    使用css3,根据屏幕分辨率进行不同的样式应用
优劣:
  • 这种布局通吃pc和移动端,做到精细处,两者的效果都很好,
  • 缺点是媒体查询是有限的,也就是可以枚举出来的
  • 对设计要求简单、清晰、复杂的设计稿会直接弄死前端,同时需要多个设计稿
  • css3低版本浏览器不支持
伸缩布局

使用的是Flexbox ,有兼容性问题
整体思路:考虑把一个元素变成一个伸缩容器 -->伸缩容器中子元素的排列方式 -->子元素所占空间

伸缩布局的属性:

1 主轴方向 flex-direction:row /row-reverse(右到左)/column/column-reverse(下到上)
2 伸缩项目在主轴的对齐方式 justify-content:flex-start /flex-end/center/space-between/space-around
3 伸缩项目是否换行 flex-wrap:nowrap/wrap
4 换行后对齐方式 align-content:stretch:拉伸/flex-start...sapce-around
5 不换行对齐方式 align-items 默认拉伸 值同上

伸缩项目的属性:

1 伸缩项目在伸缩容器中所占的空间 flex 值 数字 比例
2 自己的对齐方式 align -self:start /end/center
3 排列顺序 order 数字 值越小越靠前

动态REM的更多相关文章

  1. 动态rem与1px边框问题的理解

    当我们在项目开发中,拿到设计师的设计图,满怀欣喜的准备按照设计图将页面实现出来的时候,我们通常会遇到这个问题: 如何将页面的内容按照在不同手机屏幕浏览的情况下,比例都是不变的呢?这个时候我们就需要使用 ...

  2. Web移动端页面 --响应式和动态REM

    响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...

  3. 动态rem解决移动前端适配

    背景 移动前端适配一直困扰很多人,我自己也是从最初的媒体查询,到后来的百分比,再到padding-top这种奇巧淫技,再到css3新单位vw这种过渡转变 但这些都或多或少会有些问题,直到使用了动态re ...

  4. 本周汇总 动态rem适配移动端/块状元素居中/透明度

    1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...

  5. CSS9:动态 REM-手机专用的自适应方案

    CSS9:动态 REM-手机专用的自适应方案 动态 REM是手机专用,是如何适配所有手机的方案,不是响应式方案,例如 : taobao.com 是专门的PC端m.taobao.com 是专门的手机端, ...

  6. 2022 跳槽涨薪必不可少面试通关宝典 —— css 篇

    生于忧患死于安乐!已经居家隔离 23 天了,解封以后估计就得找工作了,提前准备起来!需要的赶紧收藏起来 一.谈谈你对 BFC 的理解及作用. BFC 是 Block Formatting Contex ...

  7. 根据屏幕大小动态设置字体rem

    1.根据屏幕大小动态设置字体rem var docEl = document.documentElement, //当设备的方向变化(设备横向持或纵向持)此事件被触发.绑定此事件时, //注意现在当浏 ...

  8. 移动端rem,scale动态设置

    pt:物理像素(电容屏上像素块个数) px:逻辑像素.设备独立像素 高清屏:1px = 4pt 普通屏:1px = 1pt dpr:设备像素比:(某一方向上)物理像素/逻辑像素 通常设置1rem=屏幕 ...

  9. 理解rem实现响应式布局原理及js动态计算rem

    前言 移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配.那么来讲讲rem在其中起的作用和如何动态设置rem的值. 1.什么是rem rem是相对于根元素(html标签)的字 ...

随机推荐

  1. 05 python开发之文件处理

    05 python开发之文件处理 目录 05 python开发之文件处理 5 文件处理 5.1 字符编码 5.1.1 基本概念 5.1.2 发展历程 5.1.3 使用 5.2 文件处理基础 5.2.1 ...

  2. Nacos windows下 ERROR Nacos failed to start, please see

    如果是windows 本地启动 直接到你本地\nacos\bin下   用cmd 启动即可 startup.cmd -m standalone 看见它你就算是 完成 了   直接访问下本的的端口  h ...

  3. 第九章、Qt Designer可视化设计界面布局组件介绍

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 在Qt Designer中,在左边部件栏的提供了界面布局相关部件,如图: 可以看到共包含有 ...

  4. 超详细讲解mysql存储过程中的in/out/inout

    存储过程 大概定义:用一个别名来描述多个sql语句的执行过程. 最简单 delimiter // create PROCEDURE p1() begin select * from userinfo; ...

  5. Hello!OA!Hello!工作流!寻找OA和工作流的旅途记录

    最近新到了一家公司,这家公司做的人力资源管理,需要一个OA系统,所以就让我做一个选型,经过我2周时间的筛选,试用,沟通,测试,最终确定了几款,这个艰辛的路程,在这里记录一下~ 寻找OA的路程----- ...

  6. Day3 Scrum 冲刺博客

    ·线上会议: 昨天已完成的工作与今天计划完成的工作及工作中遇到的困难: 成员姓名 昨天完成工作 今天计划完成的工作 工作中遇到的困难 纪昂学 创建一个Cell类,用来表示一个小方块 就创建一个Tetr ...

  7. Scrum冲刺_Day04

    一.团队展示: 1.项目:light_note备忘录 2.队名:删库跑路队 3.团队成员 队员(不分先后) 项目角色 黄敦鸿 后端工程师.测试 黄华 后端工程师.测试 黄骏鹏 后端工程师.测试 黄源钦 ...

  8. css外边距重叠及避免方法

    <html lang="en"> <head> <meta charset="UTF-8"> <meta name=& ...

  9. NOI Online #2 提高组 游戏

    没用二项式反演的菜比. 题目链接 Solution 非平局代表的树上祖先关系是比较好统计,(可以在处理一个点时,考虑用他去匹配他的子树中的东西)而平局的关系比较难统计.我们不妨求出至少 \(k\) 个 ...

  10. SSM框架中常用的注解及含义

    @Controller---使用它标记在一个类上,dispatcher会扫描使用该注解类的方法,并检测该方法是否使用了@RequestMapping注解,加上RequestMapping注解的方法才是 ...