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;
}

本周汇总 动态rem适配移动端/块状元素居中/透明度的更多相关文章

  1. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  2. 用rem适配移动端

    常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种 ...

  3. 定宽块状元素居中 1记(text-align/margin:0 auto)

    对于text-align:center的用法只是针对文本相对于父元素的居中,例如: #jz2{ width:300px; margin: 10px auto; border:2px solid red ...

  4. rem适配移动端

    一.屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size   10px = 0.10rem (function (doc, win) { var docEl = doc.docume ...

  5. 移动端absolute元素居中

    <div class="db"> <div class="dm"></div> </div> .db{ widt ...

  6. js动态计算移动端rem适配问题

    第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  7. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  8. Web移动端页面 --响应式和动态REM

    响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...

  9. 动态rem解决移动前端适配

    背景 移动前端适配一直困扰很多人,我自己也是从最初的媒体查询,到后来的百分比,再到padding-top这种奇巧淫技,再到css3新单位vw这种过渡转变 但这些都或多或少会有些问题,直到使用了动态re ...

随机推荐

  1. JS规则 编程练习 考考大家的数学,计算以下计算公式的结果。然后在浏览器中运行一下,看看结果是否跟你的结果一致。

    编程练习 考考大家的数学,计算以下计算公式的结果.然后在浏览器中运行一下,看看结果是否跟你的结果一致. 任务 第一步: 在  ? 处填写你的答案. 第二步: 填写完成后,运行一下,看看是不是跟你填写的 ...

  2. Luogu P2042 [NOI2005]维护数列(平衡树)

    P2042 [NOI2005]维护数列 题意 题目描述 请写一个程序,要求维护一个数列,支持以下\(6\)种操作:(请注意,格式栏中的下划线'_'表示实际输入文件中的空格) 输入输出格式 输入格式: ...

  3. 转载 pep8安装

    一.前提准备 在Python安装了pip的情况下,命令行输入 pip install autopep8 二.PyCharm设置 成功之后,打开PyCharm,File-->setting--&g ...

  4. 图论最短路径算法——SPFA

    为了不要让太多人被害,我还是说一下这种算法,它实际上很简单,但被人讲着讲着绕晕了. 主要思想 有人说,SPFA是Bellman-Ford的队列优化.这个算法我也懂了,但是还没试过.我不管是什么算法的优 ...

  5. Windows相关命令

    1.查看端口8080被哪个进程占用 netstat -ano | findstr "8080" 2.查看进程号为5768对应的进程 tasklist | findstr " ...

  6. thinkphp 表达式查询

    上面的查询条件仅仅是一个简单的相等判断,可以使用查询表达式支持更多的SQL查询语法,也是ThinkPHP查询语言的精髓,查询表达式的使用格式: $map['字段名'] = array('表达式','查 ...

  7. 跳表上线性dp——1150D 好题!

    题目设计的很好,感觉做了这题对dp的状态有了更深的理解 /* 先预处理序列自动机 dp[i][j][k]表示匹配到i,j,k时的最靠前的位置 那么现在A串加入了一个字母,我们要求的就是dp[i+1][ ...

  8. Excel常用函数总结

    Excel常用函数总结 2016-10-28 Kevin 叼着奶瓶撩妹 1. VLOOKUP函数 常见形式 问题描述:将下图中G列的数据根据学生的姓名填充到D列. 公式解析: =VLOOKUP(A2, ...

  9. 基于用户的最近邻协同过滤算法(MovieLens数据集)

      基于用户的最近邻算法(User-Based Neighbor Algorithms),是一种非概率性的协同过滤算法,也是推荐系统中最最古老,最著名的算法. 我们称那些兴趣相似的用户为邻居,如果用户 ...

  10. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...