有时候我们会有让内容恰好占一屏，并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意，直接谈如何实现。
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.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); } 但是这种适用于内容小于屏幕高度的，如果内容撑出屏幕，那
具体关于路由的跳转就不多讲了，具体可以参考前面第5章vue-router之什么是编程式路由
1 点击300ms 使用fastclick 2 移动端1px 在ios中使用0.5px 3 js中获取浏览器高度，获取scrollTOP等属性需要兼容 4 H5 的audio在ios上autoplay播放 一般使用进入页面后，使用js控制播放 5 在html上加overflow：hidden属性的时候，好多移动端浏览器都不支持 要实现超出范围隐藏，滚动条不显示，一般使用js获取高度来动态设置html高度 6 ios系统中在移动浏览器的页面中给按钮加JS事件，其按钮必须是原生HTML按钮或者
这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custom，如果使用自定义导航栏，我们可以
拿到这个对象，就可以根据正常网页的方法拿到嵌入（子）网页的文档高度，然后把值附给父页面的iframe的height。
最近在做一个自适应的网站，经常遇到需要文本的溢出地方，我写了一个CSS简单设置文本溢出的方法：用css实现文本溢出div显示省略号 但是IE只能设置单行溢出隐藏，Webkit内核浏览器才支持多行溢出，于是找到了这款插件，能够达到不错的效果，用Chrome自带的翻译加上自己的理解写了这么一个教程，希望能对大家有所帮助。
------------------------------------盒子模型常用的八个属性--------------------------------- Js盒子模型 Js盒子模型指的是通过js提供的一系列的属性和方法，获取页面中元素的样式信息值 client系列(当前元素的私有属性) clientWidth/clientHeight:内容的宽度/高度+左右/上下填充，（和内容溢出没有关系） clientLeft:左边框的宽度(borderLeftWidth) clientTop:上
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
为了理解插件背后的原理机制，我们实现一个自己简易版的虚拟列表，希望在实际业务项目中能带来一些思考和帮助。
在页面渲染时需要动态获取iframe子页面的高度，然后重新设置iframe高度，达到自适应的目的，但是由于iframe子页面中也涉及到访问其他系统的页面，这就使得页面渲染时无法获取子页面高度，这里涉及到跨域访问子页面问题。
很简单，我们通过在线开发平台thingjs来阐述！ 前提你要掌握js，假设你掌握了js，ThingJS 使用当今最热门的 Javascript语言进行开发。
selenium 是一个可以模拟浏览器操作的工具，据我所知，不仅仅是 Python，还有其他的编程语言也有支持的 selenium 库，可以作为爬虫或者自动化测试。当然，还有今天要说的，可以使用 selenium 来作为全网页截图工具。
大家好，又见面了，我是你们的朋友全栈君。 Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html
①. 图片大小优化，部分图片使用WebP（需要考虑webp兼容性） 在线生成，如智图、又拍云 gulp生成，gulp-webp或gulp-imageisux canvas生成
实习期间主要在写微信端H5，遇到的最大问题就是适配各个不同尺寸的屏幕。公司就我自己一个前端，只能自己摸索着来。
setStatusBarHeight、setNavBar这两个方法最好写到app.js中，获取好放在app.globalData中，这两个高度可能不止自定义导航栏需要用到。
这就引出了本篇博客的目的，一起来谈谈：项目前端部分的构建方式以及数据共享方式。
前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
最近做一个web页面，希望在手机上能滑动切换页面，第一次这种要求，在网上找到了一个插件swiper,swiper2可以在电脑和手机上使用，于是选择这个插件，在使用这个插件的过程也遇到了很多问题，如滚动条很长，体验不好，最后采用js来控制高度，在此页面中也采用了bootstrap-table插件来固定表头，采用js动态的设置高度，当页面高度小时，有滚动条，页面高时就完全展示，为了体验好，当滚动到第一个页面底部时，滑动切换第二个页面的顶部，需要scrollTop实现
html设置 overflow-x: scroll;属性后怎么让指定位如果页面不够长(至少窗口长度两倍)，那肯定滚动不到一半的位置。否则任何浏览器都不会产生误差。下面的例子输出 100 个 ，页面加载的时候会滚动到第 51 个 。window.onload = function() { // 测试：100 个 足够使 scroll 长度大于 window 长
上面两张图是两个不同的页面但是它们的基本框架都是一样，每点击一次左边的导航栏改变的都是中间的内容区域。也就是说共同的框架都是没有改变的，改变的是中间的内容。
[获取元素具体的某个样式值] 1.[元素].style.xxx 操作获取 只能获取所有写在元素行内上的样式(不写在行内上,不管你写没写都获取不到,真实项目中我们很少会把样式写在行内上),outer.style.width =>'' (width是写在样式表中的) 2.获取当前元素所有经过浏览器计算的样式 经过计算的样式：只要当前元素可以在页面中呈现（或者浏览器渲染它了），那么它的样式都是被计算过的 不管当前样式写在哪,不管你是否写了(浏览器会给元素设置一些默认样式) 标准浏览器(IE9+) window.getComputedStyle([元素],[伪类,一般都写null]) 获取到当前元素所有被浏览器计算过的样式(对象) IE6~8 [元素].currentStyle 获取经过计算的样式
圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。
图片在微信小程序中可以说是一个神奇的存在。在web开发中，我们会利用图片的自适应比如百分比而省去不少麻烦，因为高度会自适应。但是小程序中的图片都有一个初始大小，而且是固定的，无论你的图片多大多小，都是统一的320px*240px。虽然作为组件的图片支持平铺，剪切等呈现效果，但是容器大小都是固定的，所以每次使用image我们要想办法控制图片的大小。
前端爱好者的聚集地 为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点CSS技巧就可以达到这个目的，不需要使用JS。 在正常态时，每个导航的默认样式为： nav li{ opacity: 0.5; } 当前页面的导航透明度为1. 为了实现这个目的： 首先通过bo
接到一个紧急修复需求，发现一个 H5 游戏在 iOS9 下显示高度没有铺满屏幕，需要调整高度达到自适应。
为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常
在大概 8 月底，有幸参与了企鹅 FM 和微云的微信小程序开发，这篇文章是我对 UI 逻辑分离的思考总结，另由于微云的业务逻辑代码实在太复杂勒……所以文章中将主要以 FM 为例。 // 以下关于 UI 分离的实践是我一人在尝试… 姑且算是纸上谈兵，真正在 UI 开发和前台开发分开的情况下如何…等我做完需求再来更新
本文介绍了Webview与ScrollView的滚动兼容及留白处理，分享给大家，具体如下：
最近在用Flutter写一个新闻客户端, 新闻详情页中的内容 需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以 组合滑动 .
面对着产品同学不断的询问：为什么 h5 的体验这么差？为什么不能和 app 的播放体验保持一致？我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。
本文来自“小时光茶社（Tech Teahouse）”公众号 作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目，直播和视频播放是其中的核心。面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 经过一系列的调研爬坑，斩荆披棘，我们一步步提升了体验，做到了和app基本一致的体验。在摸索优化背后，我们也想把这些问题
一.简单代码示例 import asyncio from pyppeteer import launch async def main(): browser = await launch() page = await browser.newPage() #打开一个新页面 await page.goto('https://www.baidu.com/') #访问百度 await page.screenshot({'path': 'baidu.png'}) #截图并存
需求：实现 iframe 的自适应高度，能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。
圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局 。
把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。
新手上路，记录一下一些细节 1. 字体图标引入：https://uniapp.dcloud.io/frame?id=%e5%ad%97%e4%bd%93%e5%9b%be%e6%a0%87 2. 条件
开发网站的过程中有时我们不想让客户看到页面的源代码，甚至页面上的文字内容都不想被复制，下面我们来看一下怎么保护页面内容 禁止查看页面源代码和禁止复制页面中的文字
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
页面DOM导出PDF Nginx设置允许跨域 location /static { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; index index.html; root /data/wwwjarapi/8905xhkjfileapitest/; } 也就是在location下添加 add_header 'Access-Control-
最近碰到个需求，需要把当前页面生成 pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要 ：）
web前端 —— 移动端知识的一些总结 个人在移动端的一些总结归纳，有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应，不加的话，假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面 做了缩小优化，所以字体等都相应
作者简介： 文赫，2015年加入腾讯，作为前端开发工程师参与过手Q游戏公会，游戏中心，企鹅电竞等项目，具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目，直播和视频播放是其中的核心。面对着产品同学不断的询问：为什么h5的体验这么差？为什么不能和app的播放体验保持一致？我们对着h5不明确的文档和不同浏览器的怪异表现欲哭无泪。 经过一系列的调研爬坑，斩荆披棘，我们一步步提升了体验，做到了和app基本一致的体验。在摸索优化背后，我们也想把这些问题和解决方法总结下来，让其他同学做到直播的时候可以自豪的说，这
我们APP中经常存在显示网页会有网页底部留有大量空白，显示网页速度要一两秒或者更久时间的问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议
