排序:
默认
按更新时间
按访问量
RSS订阅

HTML5 移动端自适应方案与踩坑

最近刚接触前端开发,接手了一个移动端H5项目。着实体会掉了前端的坑之多,和H5移动端的坑之多多。 如今项目告一段落,在这里做一总结 屏幕自适应方案 介绍方案之前,首先还是交代一下项目背景与需求,毕竟一切方案也不能脱离实际需求。 需求与背景 设备宽度 > 800px,...

2019-03-14 09:27:01

阅读数 10

评论数 0

Grid 布局

这是一篇快速介绍网站未来布局的文章。 Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。 CSS Grid 今年也获得了主流浏览器(Safari,Chrome,Firefox,Edge)的原生支持,所以我相信所有的前端开发人员都必须在不久的将来学习这项技...

2018-11-17 10:56:19

阅读数 37

评论数 0

前端精选文摘:BFC 神奇背后的原理

BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 sp...

2018-10-18 11:38:46

阅读数 39

评论数 0

css一些易忘点

<!-- 一些易忘点 --> <!-- 1.css background 背景 --> 1.background-attachment 背景图片是固定还是随滚动而滚动 <!-- 2....

2018-10-10 14:55:57

阅读数 58

评论数 0

css整理与优化工具

http://www.css88.com/tool/csstidy/

2018-09-29 11:26:25

阅读数 224

评论数 0

css初始化文件

/*初始化类*/ @charset "UTF-8"; html { font-family: sans-serif; font-size: 20px; } html, body { -webkit-touch-callout: no...

2018-06-27 15:12:53

阅读数 288

评论数 0

CSS命名规范——BEM思想(非常赞的规范)

人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS...

2018-06-12 16:17:17

阅读数 219

评论数 0

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

前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)”)。 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实习,这几个星期来学到了移动端H5页面适配。(以前根本没做过移动端网页/(ㄒoㄒ)/~~,还是微信端...

2018-06-12 16:01:55

阅读数 472

评论数 0

flex布局

/** * flex布局 */ .flex { display: -webkit-flex; display: flex; align-items: center; -webkit-align-items: center; justify-content: space-...

2018-05-29 15:38:05

阅读数 68

评论数 0

两边横向中间文字布局

    <div class="mall-divider"> 华币明细 </div>     .mall-divider { display: t...

2018-05-15 11:33:58

阅读数 385

评论数 0

flex.css,移动端flex布局神器,兼容微信,UC,webview等移动端主流浏览器08.10

download git clone https://github.com/lzxb/flex.css.git npm npm install flex.css --save 为什么需要flex.css? 在移动端开发中,并不是所有的浏览器,webview,微信等各种版本都支持标准...

2017-12-11 14:16:43

阅读数 2292

评论数 0

css左右上下居中的几种

方法一(推荐):   position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;   方法二:   position: absolute; top: 50%; left: 50%; tra...

2017-11-09 17:41:15

阅读数 244

评论数 0

设置html的根rem(随窗口改变自动调整)

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', ...

2017-11-09 17:07:44

阅读数 1808

评论数 0

移动端css样式结构引入

1.引入reset.css重置css样式 2.引入base.css 设置一些全局默认的css样式和公共css 3.可以根据需求加入common.css 局部或者组件的公共css 4.可以根据需求引入阿里iconfont.css 图标文件   @font-face { font-fa...

2017-09-30 11:55:43

阅读数 501

评论数 0

移动端base.less

a, button, input, textarea { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } input:focus { outline: none; } body { -webkit-overflow-scrolli...

2017-09-30 11:43:37

阅读数 299

评论数 0

reset.css

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe,...

2017-09-30 11:05:38

阅读数 184

评论数 0

阿里iconfont图标使用

1.先登录阿里图标 http://www.iconfont.cn 2.加入购物车定制自己的项目图标 3.下载或者使用网络资源,在iconfont.css可以查看到自己要的图标     @font-face { font-family: 'iconfont'; src: u...

2017-09-29 17:21:26

阅读数 1652

评论数 0

header+section+footer(底部按钮布局)

<!DOCTYPE html> <html lang="en"> <head> <meta char...

2017-09-29 17:19:20

阅读数 2569

评论数 0

layer移动端案例

<!DOCTYPE html> <html lang="en"> <head> <meta cha...

2017-08-24 18:41:33

阅读数 6396

评论数 0

手机网页中输入框被输入法遮挡问题

之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填。 前提 1.弹出的对话框用display:fixed定位的  2.对话框大小固定 解决办法 css部分  (dlg-top与dlg-bottom为对话框的类,用于确定对话框的定位...

2017-08-24 17:05:31

阅读数 269

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭