h5页面 padding

H5移动前端完美布局之padding

序上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padding在页面布局中所发挥的的作用. 背景在平时的开发中我们可能会遇到说一个150*150正方形的块,或者一个button,这样我们就会发现两个问题,如果用px写死的话,那如何响应所有设备,2如果用百分比的话,宽度可控,那高度呢,今天我们来探讨下经常使用的padding在布局中的强大作用这个方

移动端H5页面高清多屏适配方案

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

[转]:移动端H5页面高清多屏适配方案

原文链接:http://www.tuicool.com/articles/YJviea 背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果

教你如何用 lib-flexible 实现移动端H5页面适配

前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实习,这几个星期来学到了移动端H5页面适配.(以前根本没做过移动端网页/(ㄒoㄒ)/~~,还是微信端的) 所以把我学到的一个小知识点写下来,也分享给前端新手们. 正文 0x00 大概说明做移动端网页和pc端很大不同的便是现在移动端窗口分辨率繁多. 很多时候UI给的设计图只有一份,还是按照iphone6设计的,

Android软键盘弹出，覆盖h5页面输入框问题

之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面输入框问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置触发条件:输入框获取焦点,弹出软键盘表现:软键盘覆盖 h5页面中的输入框问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点,手机键盘弹出,input未上移到可视区内,

关于H5页面在iPhoneX适配

1. iPhoneX的介绍屏幕尺寸我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系,但这只是外在的表现.倍图核心的影响因素在于PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念:<基础知识学起来!为设计师量身打造的DPI指南> iPhone8在本次升级中,屏幕尺寸和分辨率都遗传了iPhone6以后的优良传统: 然而iPhone X 无论是在

移动端h5页面的那些坑

最近一直在写移动端页面,由于之前写移动端写的比较少,所以此次踩过许多坑.特此总结一下: 1.<input type='button'>背景色在ios中的兼容性,颜色发白解决办法:在全局样式中加入以下代码: input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 2.在vue中使用jquery weui中的地区选择器时,通过点击

解惑好文：移动端H5页面高清多屏适配方案

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

vuejs开发H5页面总结

最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验. 关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案.不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用. 网易云的方案总

【H5】344- 微信 H5 页面兼容性解决方案

点击上方"前端自习课"关注,学习起来~ 最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光标,右边是ios的input光标. 出现原因分析:通常我们习惯用height属性设置行间的高度和line-he

H5页面基础元素

H5页面结构元素示例 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl

微信H5页面前端开发，大多数人都会遇到的几个兼容性坑

最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. 1.ios端兼容input光标高度问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光标,右边是ios的input光标. 出现原因分析:通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离(行高),当点击输入的时

Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template

pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面,除了感叹其神奇之处有没有想过其实现方式呢?本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤,并开源前后端代码.有需要的小伙伴可以按照该教程从零实现自己的H5编辑器.(实现起来并不复杂,该教程只是提供思路,并非最佳实践) 一个h5可视化编辑器种子, 高仿凡科建站模板.

h5页面在浏览器上好好的，到手机上熄火了又看不到报错信息怎么办？

背景最近小编接了一个新需求,用h5开发页面,通过webview嵌入原生APP中,自己在浏览器上开发爽歪歪,什么信息都能看到,可是一嵌入原生app中,瞬间就熄火了,啥也看不到了,不知道为什么,反正就是页面点不动了. 这可把我急坏了,不知道有没有小伙伴有和我一样的困扰,我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错

微信公众号开发之H5页面跳转到指定的小程序

前言: 最近公司有一个这样的需要,需要从我们在现有的公众号H5页面中加一个跳转到第三方小程序的按钮.之前只知道小程序之间是可以相互跳转的,今天查阅了下微信开发文档原来现在H5网页也支持小程序之间的跳转了,下面就简单描述一下对接的流程. 微信公众号详细对接文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21 公众号关联小程序: 注意:在对接跳转之前我们需要在需要跳转的小程序关

微信H5页面唤醒APP并传参跳转uniapp

主要实现是利用微信内置浏览器支持的<wx-open-launch-app>开放标签可以让你的H5网页拉起APP 在链接https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html中要看使用说明关联说明设置入口绑定域名和移动应用接入微信开放标签在链接https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/

【原】让H5页面适配移动设备全家 - 前端篇 - PPT

7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同时也提升页面体验,分享后跟设计师们沟通,反应情况良好,说明这套适配的方案是有一定价值的.在9月份很荣幸收到TID同事的邀请,参与[TID重构主题交流会]第六期:体验的前端分享,于是在设计师篇的基础上重新整理了前端篇,通过分析当前市场的数据,结合实际的项目需求,总结出适配各种移动设备分辨率的思路和解决方法,相信

【原】让H5页面适配移动设备全家 - 设计师篇 - PPT

上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前端组内做了分享,后来师傅跟我聊了下,其实现在前端和设计的合作上经常遇到页面适配问题,在沟通上影响工作效率,在页面设计上影响用户体验. 所以决定准备给设计师们带来H5适配的分享,内容大概是了解H5页面适配等问题,以便更好得配合前端完成页面,提升页面体验. 于是,在工作的业余时间,我把想到的点记录下在本子,经过几

C#开发微信门户及应用(44)--微信H5页面开发的经验总结

在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页面,给我们提供了很大的便利,本文是在自己做的一些H5微信应用页面上做了一些功能总结,希望能够给大家提供一定的帮助. 1.微信网页开发 1) JSSDK 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语

那些过目不忘的H5页面

原文链接:http://isux.tencent.com/great-mobile-h5-pages.html 从引爆朋友圈的H5小游戏<围住神经猫>,到颠覆传统广告的大众点评H5专题页<我们之间只有一个字>,从2014下半年起,各种H5游戏和专题页纷纷崭露头角.“H5”,这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野.本文聚焦于基于微信传播的H5页面的视觉设计,通过一些案例分析来谈谈设计思路与方法,希望与大家进行交流探讨. 功能与目标首先从功能与

微信H5页面内实现一键关注公众号

H5页面内实现关注公众号的微信JSSDK没有相关接口开放,因此就得动点脑筋来实现该功能了.下面的方法就是通过一种非常蹊跷的方式实现的. 首先,需要在公众号内发表一篇原创文章,注意是原创文章,然后由另一个公众号去转载该文章,注意是转载,不是转发,也不是分享.这样就会在转载的文章下面生成如下链接.

h5页面 padding

热门专题