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. sqllocaldb

    创建实例  sqllocaldb create v12.0 启动实例 sqllocaldb start v12.0

  2. idea-----Intellij IDEA配置tomcat(非maven项目)

    Intellij IDEA配置tomcat(非maven项目) 引用: https://blog.csdn.net/springlovejava/article/details/78570241 ID ...

  3. 使用node.js实现反向代理

    一. 反向代理的应用场景 1. 静态资源与动态资源分离 e.g. 图片服务器 2. AJAX跨域访问 3. 搭建统一服务网关接口 二. 使用node.js实现反向代理 1. 安装http-proxy模 ...

  4. [JZOJ4639] 【NOIP2016提高组A组7.16】Angel Beats!

    题目 描述 题目大意 给你一棵树,每次询问两个点,求出这两个点的子树的重心到其中每个点的距离和. 重心的定义是到其中每个点距离和最小的点(不一定在两棵子树内) 思考历程 想想以前我是怎么求重心的呢-- ...

  5. Ubuntu下安装和配置Apache2,小编觉得挺不错的,现在就分享给大家

    本篇文章主要介绍了详解Ubuntu下安装和配置Apache2,小编觉得挺不错的,现在就分享给大家,也给大家做个参考.有兴趣的朋友可以了解一下.(http://xz.8682222.com) 在Ubun ...

  6. C++函数模板&类模板

    函数模板 模板概念及语法 主要目的,简化代码,减少重复代码.基本语法格式:  template<class T> 或者 template<typename T> //末尾不加分 ...

  7. 新书《iOS应用逆向工程:分析与实战》

    前无古人!小白福音!国内第一本iOS应用逆向工程类图书<iOS应用逆向工程:分析与实战>就要空降啦~! 你是否曾因应用上线的第一天即遭破解而无奈苦恼,想要加以防范,却又束手无策? 你是否曾 ...

  8. day 39 MySQL之多表查询

    MySQL之多表查询   阅读目录 一 介绍 二 多表连接查询 三 符合条件连接查询 四 子查询 五 综合练习 一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 首先说一下,我们写项目一般都 ...

  9. mtk 的conferrence call建立流程

    (重点看main_log与) 抓mtk log: 1.*#*#82533284#*#*      进入抓log UI 2.*#*#825364#*#*      进入工程模式 3.进入"Lo ...

  10. C#生成指定范围内的不重复随机数

    C#生成指定范围内的不重复随机数 // Number随机数个数 // minNum随机数下限 // maxNum随机数上限 public int[] GetRandomArray(int Number ...