LY
LY
> [CSS中margin边界叠加问题及解决方案](https://github.com/fairyly/front-end-summary/blob/gh-pages/3.1.5%20CSS%E4%B8%ADmargin%E8%BE%B9%E7%95%8C%E5%8F%A0%E5%8A%A0%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88.md)
> 转自[H5页面监听Android物理返回键](https://github.com/HuJiaoHJ/blog/issues/16#issue-388191508) # H5页面监听Android物理返回键 Android物理返回键的点击事件，一般webview的默认行为是 `window.history.go(-1)` ，但是在实际需求场景下，简单的页面回退并不能满足需求，所以需要H5页面监听Android物理返回键从而自定义处理方法。 本方案的代码都在 [h5_android_back](https://github.com/HuJiaoHJ/h5_android_back) 仓库中 ## 原理 主要是运用 HTML5 History API 实现。所以，首先简单介绍下 HTML5 History API ### [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History) #### history 属性 ``` history.length history.state...
设计稿： iphone尺寸(750 * 1334 ) ```js (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize', recalc = function() { var clientWidth = docEl.clientWidth ||...
- [CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程)](https://www.css88.com/archives/8629) - [10分钟理解CSS3 FlexBox](https://segmentfault.com/a/1190000017347626)
# RN框架下多屏幕尺寸自适应样式解决方案 ### RN框架下多屏幕尺寸自适应样式解决方案 (react native)[ 屏幕适配] [TOC] #### 引言 > 屏幕适配是一个很容易被忽略的问题，但对于精益求精的产品而言，是必不可少的。移动端的适配的目的是让UI效果在不同分辨率的设备下，样式不会走形。换言之，就是如何同一套代码在不同分辨率的手机上跑时，页面元素间的布局间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致。 > 在web中，可以通过多种方式来进行适配，比如设置viewpoint、media查询等，因此对于嵌入移动的H5页面的适配问题，本文将不做讨论和展开。React native是一套开源的框架，借助RN可以快速的开发出移动APP,包括IOS及Android两端。同样RN框架也存在着多屏幕尺寸的适配问题，并且对Android的支持不是很友好。 #### 问题分析 > 不同的机型手机的屏幕尺寸不同，像素级别也不一样，所以样式的展示方式会存在差异。在RN的开发框架下，采用的是flex的布局方式，而flex的布局中，是不支持根据屏幕的尺寸，来进行百分比布局的，因此在设置宽度或者高度时是不需要单位的。 > 在RN中的单位是pt，因此可以通过Dimensions 来获取设备的宽高，PixelRatio 获取设备屏幕密度值。 #### 解决方案 1. flex弹性布局 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。...
#### 首先是单行居中，多行居左 居中需要用到 `text-align:center`，居左是默认值也就是`text-align:left`。如合让两者结合起来达到单行居中，多行居左呢？这就需要多一个标签，假设一开始我们定义如下： ``` 单行居中，多行居左 ``` 现在，我们在 `h2` 中间，嵌套多一层标签 `p`： ``` 单行居中，多行居左 ``` 我们让内层 `p` 居左 `text-align:left`，外层 `h2` 居中 `text-align:center`，并且将 `p` 设置为 `display:inline-block` ，利用 `inline-block` 元素可以被父级 `text-align:center` 居中的特性，这样就可以实现单行居中，多行居左，CSS 如下：...
## 问题 flexbox 布局时 flex 项子元素中的文本溢出后想显示省略号(…)，结果设置 `text-overflow:ellipsis` 后没效果： HTML代码： ```html 图标 flexbox 布局旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。 ``` CSS 代码： ```css * { padding: 0; margin: 0; box-sizing: border-box; } .flex { width: 320px;...
## 前言 遵循 [IEEE 754](https://zh.wikipedia.org/wiki/IEEE_754) 标准的语言都会存在这个问题 ## 怎样解决JS浮点数精度问题？ **精度损失可能出现在进制转化和对阶运算过程中** ### 1. 将数字转为整数 ```js function add(num1, num2) { const num1Digits = (num1.toString().split('.')[1] || '').length; const num2Digits = (num2.toString().split('.')[1] || '').length; const...
> 转自 https://juejin.im/post/5b88ddca6fb9a019c7717096 之前面试今日头条的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。 为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度 1. 打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方  2. 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项  3. 这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 # css加载会阻塞DOM树的解析渲染吗？ 用代码说话： ``` css阻塞 h1 { color: red !important } function h () { console.log(document.querySelectorAll('h1'))...
> 转自：https://juejin.im/post/5bf769e0518825773a2ebfe5 # 一道面试题引起的思考 今天在认真干（划）活（水）的时候，看到群里有人发了一道头条的面试题，就顺便看了一下，发现挺有意思的，就决定分享给大家，并且给出我的解决方案和思考过程。 题目如下： 实现一个get函数，使得下面的调用可以输出正确的结果 ``` const obj = { selector: { to: { toutiao: "FE Coder"} }, target: [1, 2, { name: 'byted'}]}; get(obj, 'selector.to.toutiao', 'target[0]', 'target[2].name');...