动态rem解决移动前端适配

动态rem解决移动前端适配
动态rem解决移动前端适配 移动前端适配一直困扰很多人,我自己也是从最初的媒体查询,到后来的百分比,再到padding-top这种奇巧淫技,再到css3新单位vw这种过渡转变 但这些都或多或少会有些问题,直到使用了动态rem 才真正不再在适配这个问题上发愁 只因为叫动态rem 是因为他是真正意义上随着屏幕的大小来变化的。 rem rem官方解释是 font size of the root element 字面意思就是 根元素的font-size值 也就...

CSS 外边距(margin)重叠及防止方法

CSS 外边距(margin)重叠及防止方法
两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去绝对值最大的负边界。注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成。 但是边界的重叠也有例外情况: 1、水平边距永远不会重合。 2、在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值...

移动web资源整理

移动web资源整理
2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题、高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络,页面打开慢 低端机性能差——页面操作卡顿 HTML5新技术多——学习成本不低 未知问题——坑多 面对这些问题,一开始我们只能在未知中试错,知道错误的方案才能更容易寻找正确的解决问题思路,2年多来,可看到移动web在业界不断趋向于成熟...

max(min)-device-width和max(min)-width

max(min)-device-width和max(min)-width
在网页自适应设计中,max-device-width和max-width是不可缺少的两大CSS属性,但是可能大家在使用的选择上没有太多讲究,认为用其中一个即可。确实,如果没有特定要求,用任何一个都没有什么问题,不过如果你对此两个属性有了充分的认识之后,你或许把网页的自适应设计得更为极致一些。 max-device-width和max-width的区别 max-device-width和max-width是有区别的,表现在如下几个方面: 1、max-device-widt...

移动端界面设计之尺寸篇 – 学ui网

移动端界面设计之尺寸篇 – 学ui网
学ui网设计交流群里的雄雄童鞋,写的一篇基础的手机端 界面设计的尺寸,简单好用,入门级必备~! 插播一个 app所用的字体大礼包下载(虎哥整理的) 作者在写这篇文章时候还没有出iphone6,所以把这一部分的也给补上,相关的尺寸请点下面2篇文章查看。 移动端界面设计之尺寸篇(淘宝版) iPhone6 & 6 Plus 视觉设计适配说明 h5移动端页面设计学习文档 下面才是正文,来吧,特别适合初学者。 作者:Mus ...

before 和after应用

before 和after应用
before 和after应用:     <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding:0;margin:0} body{font-size:12px} span{width:40px;height:40px;border-radius: 20px;background: #0a428d;display: block} #wrap{width:300px;margin:100px auto 40px;height:300px;positio...

li img 空隙

li img 空隙
li img 空隙 法宝一:定义图片img标签vertical-align:bottom,vertical-align:middle,vertical-align:top。 img{vertical-align:bottom;} 法宝二:定义容器里的字体大小为0。 div { width:110px; border:1px solid #000000; font-size:0 } 图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关),所以设置 vertical-align:...

双飞翼和圣杯布局

双飞翼和圣杯布局
仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术。只要巧妙组合,并加以灵活运用,就能“拼”出各种布局的实现方案。 尝试之路考虑以下DOM结构: <div id="page">           <div id="hd"></div>              <div id="bd">                       <div clas...
Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录