集合

叶繁终唯枯
170 阅读6分钟

1、字体单位

1.1 px

像素单位。相对长度单位，是相对于显示器屏幕分辨率来说的。

特点

  • IE无法调整那些使用px作为单位的字体大小
  • 国外的大部分网站能调整的原因在于使用了em和rem作为字体单位

1.2 em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

特点

  • em的值并不是固定的
  • em会继承父级元素的大小

注意：任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合：1em = 16px。那么12px = 0.75em，10px = 0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size = 62.5%，这就使em值变为 16px62.5% = 10px，这样12px = 1.2em，10px = 1em，也就是说只需要将你的原来的px数值除以10，然后换上em 作为单位就行了。所以我们在写CSS的时候，需要注意两点： 1、body选择器中声明 Font-size = 62.5%; 2、将原来的px数值除以10，然后换上em作为单位 重新计算那些被放大的字体的em数值，避免字体大小的重复声明。也就是避免1.21.2 = 1.44 的现象。比如在#id中 声明了字体大小为1.2em，那么在声明的字体大小时就只能是1em,而不是1.2em，类比作用域，在全局作用域中声明的 变量在块级作用域中定义同样名称的变量。

1.3 rem

rem 是CSS3新增的一个相对单位（root em）。rem与em相比，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。rem集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均支持rem，对于不支持它的浏览器，需要多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。例如：

   p {
        font-size:14px;
        font-size:.875rem;
    }

注意：选择使用说明字体单位主要由你的项目决定，如果你的用于群都是用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就是用px，或者两者同时使用。

1.4 %

（百分比），相对长度单位，相对于父元素的百分比值元素。相对于父元素宽度或者高度的百分之几。 百分比与字体大小使用的区别：

1、尽量使用相对尺寸单位

使用相对尺寸单位计量，在调整页面布局的时候，不需要遍历所有的内部DOM结构，重新设置内部子元素的尺寸大小。如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。

2、字体尺寸尽量使用em、rem

为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用em。

1.5 vh和vw

vh和vw相对于视口的高度和宽度，1vw相当于浏览器窗口宽度的百分之一；1vh相当于浏览器窗口高度的百分之一。

1vh = 900px / 100 = 9px;
1vw = 750px/100 = 7.5px;

注意：vw和vh是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成100vw和100%的时候实现的效果一致；如果没有滚动条的话，则100vw中就不包括滚动条的，100%是包括滚动条的距离的。

问题：750设计图，20px为多少rem

首先设计图是UI设计提供给前端的设计稿，750的设计图出自于手机屏幕为375px*667px的iPhone678手机屏幕的设计
稿，也可以称之为2倍图。20px的字体大小设计到了单位的转化，页面中默认的字体大小为16px，那么此时的1rem = 
16px；那么20px通过计算得出公式1rem = 16px；那么 ？rem = 20px；得出结果为：1.25rem。

扩展：
因为他的设备像素比（dpr = 物理像素/CSS像素）是2；dpr是一个固定的比值；不同的手机型号比值不同：
物理像素：可以理解成你ps里面测量的距离的大小
CSS像素：你编写开发代码的时候CSS里面给定的像素值；
dpr固定值如下如：

pic1-16414438971661.png pic2.png pic3.png

2、 app怎么做适配的

  • 基于手机系统开发的app（原生Android/IOS）
  • 设置标签
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" 
    name="viewport" />

app完成的页面的宽度等于设备的宽度，页面的缩放比例为1.0，不允许最大缩放；

  • 使用媒体查询和响应式做适配
    • 使用媒体查询检测设备屏幕的大小改变布局样式，但是成本耗费比较大，不易操作。
  • 使用单位自己单位中经常使用的封装好的flexble.js文件做适配
    • 分装好的flexble.js 文件可以做到适配，并且原来是已经分装好的视口和设备像素比基于webapp开发。

3、 bfc是什么，清除浮动的原理

  • BFC含义：
    • 块格式化上下文（Block Formatting Context，BFC）。是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
  • BFC的触发调价
    • 根元素
    • float属性不为none（脱离文档流）
    • position为absolute或fixed
    • display为inline-block,table-cell,table-caption,flex,inine-flex,flow-root
    • overflow不为visible
  • BFC的目的：
    • 形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。
  • BFC布局规则：
    • 内部的Box会在垂直方向，一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
    • 每个元素的margin box的左边， 与包含块border box的左边相接触
    • BFC的区域不会与float box重叠。
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
    • 计算BFC的高度时，浮动元素也参与计算
avatar
文章
阅读
粉丝