本周汇总 动态rem适配移动端/块状元素居中/透明度
2024-09-05 04:14:06
1、动态rem适配移动端
!function(){
var width = document.documentElement.clientWidth;
var head=document.getElementsByTagName("head")[0];
var style=document.createElement("style");
style.innerHTML="html{font-size:"+width/10+"px;}";
head.appendChild(style);
}()
width/10是为了保证10rem占宽满屏,不除的话,1rem就等于屏幕宽度了。然后我们只需要动态加上上面的js代码,就不需要做各种媒体查询就能适配各种设备宽度。
2、块状元素居中
上图代码显示用绝对定位,top,left50%,然后负margin宽高的一半,light-height为元素的高就能实现垂直居中。相信大家都知道,但是有个问题,如果元素的宽高变了,那我们也要手动的去改margin。这里有一个更方便的办法,如果不考虑IE低版本的浏览器的情况下,可以用translate来实现,这样无论元素怎么变,都不会有影响。
3、透明度
一个块级元素你使用了opacity来做透明度的话,它会使子元素跟着也透明,即使子元素设置不透明。同样的,上代码
解决办法是使用rgba来做透明度,它将不会影响其子元素(完美)!
4、display:inline-block 4像素问题
(chrome 下是8像素)父元素 加 font-size:0,子元素设置font-size:N px;
ul {
list-style: none outside none;
padding: 10px;
text-align: center;
font-size: 0px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
padding: 5px;
font-size: 12px;
}
这种方法不兼容Safari,在父元素中设置font-size:0,用来兼容chrome,而使用letter-space:-N px来兼容safari:
ul {
letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
word-spacing: -4px;
font-size: 0;
}
ul li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}
最新文章
- iOS从零开始学习直播之1.播放
- div内容溢出时显示滚动条
- Ionic2学习笔记(6):Navigation
- 深入理解PHP内核(十四)类的成员变量及方法
- UVa 445 - Marvelous Mazes
- 基于 Quartz 开发企业级任务调度应用
- 【Todo】Java要学的一些比较好的框架和系统
- poj2583---Series Determination
- 神经网络MPLClassifier分类
- pythonのdjango select_related 和 prefetch_related()
- JAVA新的一天
- Holt-Winters
- js中把ajax获取的数据转化成树状结构(并做成多级联动效果)
- PowerScript数据类型及变量
- PMM 对MYSQL 的监控配制
- svn中给个地址,然后把自己建立的项目拖进去
- [UE4]装饰器:Blackboard(装饰器的一种,不是黑板)
- spring boot 与 thymeleaf (2): 常用表达式
- Postgresql 正则表达式
- MyEclipse中自定义maven命令(添加maven 命令)
热门文章
- android 使用现成做get请求
- var、fucntion关键字优先级问题
- Android开发 EditText按回车按键后出现 focus search returned a view that wasn't able to take focus! 错误
- 读《深入PHP 面向对象、模式与实践》笔记
- css---4表单相关伪类
- Mr. Young's Picture Permutations
- LinkedHashMap笔记
- mysql联表查询,使用phpStudy自带的
- EF(Entity Framwork)结构
- 苹果CMS