本周汇总 动态rem适配移动端/块状元素居中/透明度
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适配移动端/块状元素居中/透明度的更多相关文章
- Vue将px转化为rem适配移动端
Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...
- 用rem适配移动端
常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种 ...
- 定宽块状元素居中 1记(text-align/margin:0 auto)
对于text-align:center的用法只是针对文本相对于父元素的居中,例如: #jz2{ width:300px; margin: 10px auto; border:2px solid red ...
- rem适配移动端
一.屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size 10px = 0.10rem (function (doc, win) { var docEl = doc.docume ...
- 移动端absolute元素居中
<div class="db"> <div class="dm"></div> </div> .db{ widt ...
- 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 ...
- 移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
- Web移动端页面 --响应式和动态REM
响应式 什么是响应式页面呢? 顾名思义响应式页面就是能做出响应的页面,它的页面效果不是定死的,会随着用户的改变而改变. 如何着手响应式有以下几个思考的方向 找一份设计图 使用Media Query 隐 ...
- 动态rem解决移动前端适配
背景 移动前端适配一直困扰很多人,我自己也是从最初的媒体查询,到后来的百分比,再到padding-top这种奇巧淫技,再到css3新单位vw这种过渡转变 但这些都或多或少会有些问题,直到使用了动态re ...
随机推荐
- grep 强大的文本搜索工具
1.grep -r "History folder does't exist:" * :中间是要搜索的文本,* 表示全部显示出来
- Android开发 处理拍照完成后的照片角度
private void initImageAngle(){ Bitmap imageBitmap = BitmapFactory.decodeFile(FilePathSession.getFace ...
- Atcoder arc096
C:Half and Half 几个if语句贪心算一算就好了 #include<cstdio> #include<algorithm> using namespace std; ...
- 1.前端数据可视化插件:Highcharts、Echarts和D3(区别)
前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https: ...
- odoo widgets.js 笔记
// 在OpenERP的Web框架内, // 通过声明一个函数来声明一个JavaScript模块[openerp.ext_picking就是这个JS模块], // 并把这个函数放在全局变量opener ...
- 【转】IOS获取屏窗高度踩坑之window.outerHeight
近日本人在直接使用window.outerHeight获取屏窗高度时 在iphone 6中出现等于0的情况,从而导致页面发生错误 后找遍代码,测试无数,终于让我逮住了这个该死兼容 window.out ...
- 廖雪峰Java11多线程编程-3高级concurrent包-5Atomic
Atomic java.util.concurrent.atomic提供了一组原子类型操作: 如AtomicInteger提供了 int addAndGet(int delta) int increm ...
- php包含文件
PHP 包含文件 PHP include 和 require 语句 在 PHP 中,您可以在服务器执行 PHP 文件之前在该文件中插入一个文件的内容. include 和 require 语句用于在执 ...
- Java笔记 - 输入输出流
java.io包中定义了各式各样的"流(stream)" 类型(类或抽象类),通过标准的方法实现对于数据的输入/输出操作. 一.流类型分类 以从不同的角度对其进行分类:按数据流的方 ...
- linux下安装rabbitmq 集群
1.下载erlang官网地址 http://www.erlang.org/download 挑选合适的版本 然后 wget 比如目前18.3运行命令 wget http://erlang.org/do ...