此 blog 项目是基于 react 全家桶 + Ant Design 的,项目已经开源,项目地址在 github 上。
是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。一个CSS像素对应多少个设备像素是根据当前的缩放比例
该文章介绍了移动端网页设计中百分比宽度实现四等分的方法,包括使用vw、rem、flex和%等单位,以及使用padding等技术进行宽高比例的控制。同时,也介绍了一些兼容性的问题。
由于移动端的设备宽度各不相同,而且因为竖屏宽度都比较小,所以一般都采用满屏的方式布局,而不像PC端的使用固定宽度居中的技术布局。既然要使用满屏,那么各种百分比技术就显得尤其重要,下面大概聊聊实战过程使用到的一些技术。
因为CSS里部分属性是继承父级而来的,height就是其中之一,当前html标签height为0,自然而然body100%也为0。
接到一个紧急修复需求,发现一个 H5 游戏在 iOS9 下显示高度没有铺满屏幕,需要调整高度达到自适应。
但是不同手机浏览器有自己的地址栏、状态栏等,window.screen.availHeight 取到的屏幕高度也包括了这两者,导至本来希望满屏显示的内容出现滚动条,需要滑动才能看到。
备忘:先记录下谷歌广告的地址: https://www.google.com/adsense/new/u/ 我们使用谷歌广告代码后,往往会占用屏幕满屏,特别我们移动端的时候,那么就与我们自己网站设置的样式格格不入了。我们需要让他在我们设置的样式div内部,不让他跑出去。
在我们的日常开发场景中,表单打印是一个比较常见的场景,微搭本身不带打印功能,我们需要借助一个第三方的库来实现打印。
在开发/测试过程中有多台设备(PC/手机/模拟器)通过 Fiddler 代理上网时,如何方便地从满屏纷飞的 Session 中筛选出自己关心的那台设备的请求?
HTML5学堂:移动端布局一直都是一个问题,各种各样的分辨率使得移动端的布局需要耗费大量的时间。今天介绍一个框架pageResponse.js可以让页面在各种分辨率手机下都能完全不走样。 通常移动端的布局方式 1、rem布局,通过动态设置根目录下的font-size达到元素大小“自适应”,通常和百分比布局一起使用 2、固定像素设固定视口宽度。 3、最费事的media query,根据设备视口宽度不同设置不同的样式,换句话说一个页面有多套样式。可以说是正宗的响应式布局。 常规的做法带来的苦恼 常规的这些做法总
作为前端工程师,页面布局是基本功。面对悟空中台的海量的活动需求,仅仅有几招常规的布局套路显然是难以招架的,悟空开发者团队从个性化需求中提炼特定场景下的共性特点,设计了多个“创意布局”方案。
小程序的实时音视频播放需要先去微信开发者平台开通权限,「开发」-「接口设置」中自助开通该组件权限。
演示效果 自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 在组件中使用 <full-page :options="options" ref="page">
之前有小伙伴反馈一个问题。说每次刷新页面,个人头像的图片都会全屏显示,闪烁一下再回到正常位置和大小。用个可怕的头像的时候尤其吓人。
关于如何自定义设置 Dialog 的大小,以及如何让宽度占满整个屏幕,其实是一个老生常谈的内容了,特别是对于很多新手来说。关于这方面的内容网上一搜一大把。我也看了一下,大多数是互相抄袭。来来回回就是那么几句代码。真实的运行结果往往并不是占满屏幕。这篇文章是把很多常见的情况都举例了。我们先看 Dialog 占满屏的效果,好了下面一步一步看,如果不想看过程可以直接跳过看总结。
暗恋让人受尽委屈!一开始,你是我的秘密,我怕你知道,又怕你不知道,又怕你知道装作不知道!
因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段 ,不然会报微信小程序getLocation 需要在app.json中声明permission字段
本文需要实现的页面如下,点击左侧导航栏按钮,右侧自动滑动到对应位置。当滑动右侧内容,左侧导航栏也要做出相应变动。
我们知道美帝电影基本在结尾都会有彩蛋出现 多则会有2个,以预期下一部剧情走向,那在互联网界呢?一般会在与用户直接接触的页面中做文章。 近年来用户体验越来越受人重视,页面中展现各种酷炫的效果,H5的发展更是在移动端发用得如鱼得水,BAT等业务发展也是重视对页面改版又改版,使得后来的前端设计师们纷纷效仿,那就涉及到F12的“偷师”,所谓不会前端的工程师不是一个好程序员,那来看看一些互联网大佬会在网页中放哪些只有工程师才能发现的彩蛋。 据说这个创意是某程序猿通过工作技能来减轻HR的工作压力,借此博取H
html{ font-size:1mm; } .titleheight{ height:10rem; //这里等于10mm width:11rem; //这里等于11mm }
ScrollView滚动视图是指当拥有很多内容、屏幕显示不完时、需要通过滚动跳来显示的视图、Scrollview的一般用法如下
init(self, generate_frame=20): 这是类的初始化方法,用于创建一个对象时进行一些初始设置。
viewport是移动端跨屏适配的基石,吃透这一概念,任何复杂多变的适配需求,都可以手到擒来。
这里我们就获取到了相关登陆参数,固定不变的不用管,主要是两个参数,codeKey和password!
ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具。 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/。 ESLint的
一两分钟后,满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。
Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性
1.map组件的高度如果想要铺满屏幕,要是使用height:100vh样式 2.获取位置要在app.json中标明权限 3.先使用wx.getLocation获取自己的位置,然后再回调中使用setData方法,赋予数据给前台页面展示标注点
什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示出页面的大致结构(灰色占位图),在拿到接口数据后渲染出实际页面内容然后替换掉。Skeleton Screen 是近两年开始流行的加载控件,本质上是界面加载过程中的过渡效果。
在现代生活中,电脑已经普及到方方面面。无论是休闲娱乐,还是上班办公,它都陪在我们身边,成为我们生活中不可分割的一部分。
Canvas是常见的前端技术,但是由于API众多,使用复杂,且对程序员的数学功底、空间想象能力乃至审美都有一定要求,所以真正擅长canvas的前端并不多,但并不代表大家就学不好canvas。我在此将常用的canvas使用场景罗列出来希望能帮助到大家。
每到这种日子,最头疼的就要数送礼物这件事了,在这件事上,我绝对是有发言权的————反面教材的发言权。
在一个夜深人静的晚上,程序员小丞坐在屋顶上,看着屏幕上满屏的error,心里拔凉拔凉的,泪水润湿了脸庞,无数个自己提桶跑路的身影充斥在脑海之中,猛然才发现自己还没有桶。此时星空中闪过了漫天的流星,小丞看到此景,心中的bug早已化去,留下的是还原此景的豪言壮举!(梦醒了,纯属瞎编)
七夕节马上就要到了,作为拥有对象(没有的话,可以选择 new 一个出来)的程序员来说,肯定是需要有一点表示才行的。用钱能买到的东西不一定能表达咱们的心意,但是用心去写的代码,还能让对象每天看到那才是最正确的选择。
一天下来收到的错误是很多的,满屏幕的各种花色的错误(HTTP请求错误,JS错误,资源加载错误),累积多了看着就会变得心烦懒得去理。然而,中间可能隐藏着某些严重的错误需要识别出来,赶紧解决。就像这个Demo的数据:
百度了很多办法,都没有解决,最多的就是使用replacet替换,最接近预想结果的是在上面的success方法中,加上:
自动导入 Stack Overflow 上该关键字的高票回答里能跑起来的代码!面向 stackoverflow 编程?
平时写CSS,感觉有很多多余的代码或者不好实现的方法,于是有了预处理器的解决方案,主旨是write less &do more。其实原生css中,用上css变量也不差,加上bem命名规则只要嵌套不深也能和less、sass的嵌套媲美。在一些动画或者炫酷的特效中,不用js的话可能是用了css动画、svg的animation、过渡,复杂动画实现用了js的话可能用了canvas、直接修改style属性。用js的,然后有没有想过一个问题:“要是canvas那套放在dom上就爽了”。因为复杂的动画频繁操作了dom,违背了倒背如流的“性能优化之一:尽量少操作dom”的规矩,嘴上说着不要,手倒是很诚实地ele.style.prop = <newProp>,可是要实现效果这又是无可奈何或者大大减小工作量的方法。
而今再次负责小程序,时隔许久,真是一片懵逼,多亏了之前的简短记录,这里将会不断记录完善开发过程中遇到的一系列的小问题。
有时候我们会用 nohup java -jar xxx.jar来将一些可执行的java application挂在后台,类似windows服务一样来运行。但是有一个不爽的地方,在linux终端里用jp
这个是基于three.js的全景插件 photo-sphere-viewer.js ———————————————————————————————————————— 1、能添加热点; 2、能调用陀螺仪; 3、功能比较完善,能满足大多数人的需求了; 4、最主要的是操作简单,提供一长全景图片即可(大多数手机都可以拍摄)。 直接上代码: var photosphere = document.getElementById('photosphere'); var PSV = new PhotoSphereVie
当我们单击一个按钮打开一个新的网页的时候,如何返回前一个页面呢?我们带着疑问来继续今天的内容
《家庭影院.液晶电视.液晶电视连接电脑全功略》http://blog.csdn.net/liwei_cmg/archive/2008/11/28/3402883.aspx 一文中介绍了使用三星32A550P1R,作为电脑外接显示器+音箱的方法。其中中提到了 使用1366*768的分辨率。32A550物理分辩率为1920*1080,本文主要介绍使用HDMI 完成1920*1080的点对点连接。
文章更新: 20170410 初次成文 问题提出: 其实这篇文章构思很久了,拖到现在才写...原因就在于在Linux Deploy上部署图形环境是一件坑多活累的工作:一来是因为兼容性原因,部署好的图形界面环境存在数量可观的Bug,并且小苏也无力解决这些Bug。二来是因为基础的Linux环境才是图形界面环境部署的前提,而最近由于各种原因,使用原始的部署方法已经越来越难部署成功基础的Linux环境了。 但这样看来,第一点倒不是什么大问题:毕竟手机不是为运行专业的Linux发行版而生,所以存在Bug
领取专属 10元无门槛券
手把手带您无忧上云