由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
大家好，又见面了，我是你们的朋友全栈君。 Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html
前端它是一个工作，它的工作领域是浏览器，它即要跟美工、设计打交道又要懂点后台代码，知道ajax怎么从后台拿数据，接口怎么调用，最主要的是把美工的图合成完成的网页呈现在用户面前，需要实现网页的交互效果。
最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。
一、最最基本的 CSS顶部, JS底部 YUI compressor/Gzip CDN 有 必要的CSS Sprite Ajax可缓存 以上没什么好说的。 二、CSS渲染、页面重绘以及回流 尽量避免类似.a.b{}.list a{}以及其他一些复杂选择器，以提高整站整体CSS渲染。 避免某些expression表达式，避免IE6的AlphaImageLoader png透明滤镜，可以试试使用fireworks生成png8 alpha透明（目前photoshop只有png8 索引透明）。 适当定高，例如如果d
近日，腾讯开源跨端框架 Hippy，一周即吸引3000+star。在腾讯内部，Hippy 已运行3年之久，跨 BG 共有 18 款线上业务正在使用 Hippy，日均 PV 过亿，且已建立一套完整生态。相较于其他跨端框架，Hippy 对前端开发者更友好：紧贴 W3C 标准，遵从网页开发各项规则，使用 JavaScript 为开发语言，同时支持 React 和 Vue 两种前端主流框架。本文为大家介绍了Hippy 常用调试方法和常见问题案例，希望能够帮助开发者快速上手。
虚拟 DOM（Virtual DOM）本质上是 JS 和 DOM 之间的一个映射缓存，它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象
mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /*移动端*/ background: rgba(0,0,0,.5); /*ie*/ background: #000; opacity: 0.5; filter: alpha(opacity = 0.5); } 但是这种适用于内容小于屏幕高度的，如果内容撑出屏幕，那
前言 在日常开发过程中，我们会遇到一些需要不定期动态改变布局的页面或视图块，下面用张图展示一下： 📷 zdm_home.png 我以这张图解释一下需求，图上的几块都是需要显示不同的功能模块，点击的时候也需要跳转到不同页面。这个布局实现很简单，但是如果这个布局需要不定期的更改，比如A换到右边，大小发生变化等不确定因素，我们不可能就发布一个新的版本去修改这个页面。所以大部分人会选择webView来实现，或者事先约定好几种布局格式，由后台来随时改变布局。 解决思路 事实上这一块并占不了整个页面，大部分情况下只是在
在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起（ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域，这里不做讨论）
Flutter 是一个非常优秀的开发框架，借助 Flutter，开发者可以在 iOS 以及 Android 平台自由地发挥创意，构建交互丰富的、精美的应用程序。
原文链接：https://godbasin.github.io/2018/09/02/wxapp-technology-architecture/
前端的框架太多让人眼花缭乱，很多相似的地方，优秀的地方大家都会借鉴，同时又会有各自的一些特点。小程序也好，其他框架也好，理解他们的设计缘由、实现原理，还是能学到很多很多东西的。
| 导语 前端的框架太多让人眼花缭乱，很多相似的地方，优秀的地方大家都会借鉴，同时又会有各自的一些特点。小程序也好，其他框架也好，理解他们的设计缘由、实现原理，还是能学到很多很多东西的。 技术选型 目前来说，页面渲染的方式主要有三种： 一、Web 渲染。 二、Native 原生渲染。 三、Web 与 Native 两者掺杂，也即我们常说的 Hybrid 渲染。 前面也说过，小程序最终的呈现形式，是 WebView + 原生组件，Hybrid 方式。我们结合之前对小程序的期望来看： 开发门槛：Web
在开发过程中，我们经常会遇到要加弹窗的需求，而如果当前页的展示数据一屏展示不完，则在打开弹窗后，有滑动操作时，页面也会随之滑动。那么如何处理这一问题呢？
https://github.com/vuejs/vue-devtools#vue-devtools
不知各位遇到特别长的图片时是怎么处理的？ 是 截取符合长宽的部分做临时展示？ 还是 硬要长宽100%模糊（啥也看不清）展示？ 还是 先拿一个压缩的图片做占位，在鼠标移入或点击时放大预览？
轮播图是我们常见的一种表现形式，通常，图片之间要做到无缝衔接循环需要花一些功夫，而小程序提供的组件就已经可以实现。可以说省去了开发者不少的时间。所以，今天我们要一起来学习以下几件事：
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
3.让你设计一个web站点，假如只有你一个人设计实现，前端后端都让你一个人负责，具体你要怎么做？
adminLte默认是全局刷新，也就是不存在frame页面，经过修改，可以很容易实现右边内容框用frame实现页面刷新，这样就不需要整个页面全局刷新，点击相应菜单时，只会刷新frame窗口，但是有一个问题就是frame默认高度只有一丁点，百度之后用了自适应也会有各种问题，比如高度只能拉伸不会缩短，在解决的道路上真的是没有一个完美的解决方案，经过自己研究，发现一个非常简单的方法，那就是用js获取window的innerHeight，代码实现window.innerHeight，然后出去顶部的状态栏，以及空白部分，经过测试，窗口高度减去90是最合适的，也可以根据你自己的情况加减，最后调至一个最完美高度，发现任何分辨率都不会有问题！
在过去的十年里，前端技术日新月异。从最早的纯静态页面，到 jQuery 一统江湖，再到近几年大火的 MVVM 框架——研发模式升级这件事情对于前端来说，好像成了某种常态。其实研发模式不断演进的背后，恰恰蕴含着前端人对 “DOM 操作” 这一核心动作的持续思考和改进。而虚拟 DOM，正是先驱们在这个过程中孕育出的一颗明珠。
-transition：max-height：0.5s使用默认的ease时间函数在0.5秒内过渡max-height的值。
今天继续做案例,昨天就看了三集...想要看完真是遥遥无期,我真的太懒了...间歇性踌躇满志,持续性懒惰,达咩!!!
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
随着移动互联网的快速发展，微信小程序、Web、App、 车载等各种形态的“端”悄然盛行。
“今天下班前把报表做好了给我”，听到老板的这句话，很多人都不敢反驳，也只能默默加班，然后打开了Excel，这一做就是好几个小时。
物联网设备在CPU性能和内存空间方面皆存在严格受限，在使用V8引擎这类大型引擎时难免存在诸多不便。在此背景下，JerryScript引擎诞生了。JerryScript是由三星开发的一款炙手可热的轻量级引擎，其目的是让JavaScript开发者能够更好地构建物联网应用， JerryScript是一个轻量级的JavaScript引擎，用于资源受限的设备，如微控制器。它可以在RAM小于64KB、闪存小于200KB的设备上运行。
通过使用 rem + js 改变 html 标签的 font-size（整体缩放）实现兼容性更高的页面下面来举个例子， 当我们拿到的设计图是 750px 的时候，窗口宽度 750px，html 的 font-size 的大小为 100px；
所谓“内滚动布局”，顾名思义就是主滚动条在页面内部的布局，是相对于传统的<html>滚动而言的，例如，下图所示滚动条，是从头部下方开始：
---- 相关知识点 布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法...... 题目&答案 如何理解CSS的盒子模型？ 每个HTML元素都是长方形盒子。 （1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。 （2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。 link和@import的区别？ （1）link属于XHTML标签，
通过触发pagechange1方法中的事件对currentIndex来进行赋值，又通过currentIndex的改变使前端wxml对应更改，这个部分对滑动和点击的操作都一样，无非就是使currentIndex对应到各自的位置，通过数字来决定位置
fixed定位的元素是相对于屏幕视口(viewport)进行定位的，当H5嵌入到app的webview中进行展示时，可以理解为：fixed是相对于webview进行定位的。
身为前端，打交道最多的就是浏览器和node了，也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程，......，我们直接来到收到服务器返回内容部分开始。
七月虽然不是一个丰收的季节，但却是一个十分酷热的月份。不知有多少小伙伴跟我一样，顶着大太阳奔波在各种面试的征途中。面试是一个漫长的过程。但是也是一个让你快速提升的过程。其中包含了无数的血与泪。去面试前首先我们必须有牢固的基础知识，足够丰富的项目经历(就我而言差不多是三个完整项目经历，时间累计差不多接近一年)。然后就是表述能力，你要能把你的答案给面试官描述清楚，注意专业词汇，这将大大提高面试官对你的印象分！
定义： 当通过JS或css改变了元素的宽度、高度等，修改了元素的几何位置属性，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。无疑， 重排需要更新完整的渲染流水线，所以开销也是最大的。
前言 最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。 单列布局
文 | 何延希 何延希，美团点评工程师，4 年 web 开发经验，现在是美团点评点餐团队的一员。 在上一期，知晓程序（微信号 zxcx0101）与大家分享了「大众点评点餐」小程序团队带来的小程序技术分析。 本期，我们想要和大家分享下大众点评点餐小程序中，有关 View 视图层的一些开发经验。 本文部分示例来自于「大众点评点餐」小程序的菜单页面。 页面代码结构为： 我们将要说的小程序的 View 视图层，是由 WXML（menu.html）与 WXSS（menu.less）两大部分组成，由组件——也就是视图
中秋节马上就要到来了，这是一个很有意义的节日，意味这团圆和美满。 为此，我也特别准备了一个案例 中秋主题的3D旋转相册 Paste_Image.png 如图，这是通过Javascript和css3
与目前业内的几个小程序框架相比较而言，mpx 开发设计的出发点就是基于原生的小程序去做功能增强。所以从开发框架的角度来说，是没有任何“包袱”，围绕着原生小程序这个 core 去做不同功能的 patch 工作，使得开发小程序的体验更好。
CSS 中，transition 属性用于指定为一个或多个 CSS 属性添加过渡效果。
1.DOM Tree：浏览器将HTML解析成树形的数据结构，构建一颗DOM树，同时进行第三步。
Material Design 是 Google 在 2014 年 I/O 大会上发布的一种新的设计规范。这种设计风格给 Android UI 设计带来了很多的变化。让页面变得美感十足。
offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
自从图形界面操作系统问世以来，之上的应用软件基本都会绘制界面，这也是用户使用软件的接口，叫做 UI （user interface）。涉及到用户体验、设计、具体界面的开发，是软件中和用户最近的一部分，也是多个职能的岗位交集最多的部分。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
