rem布局 html,移动端h5之rem布局/px2rem
rem布局之媒体匹配
最早的时候用的rem适配方法,通过手动设置媒体查询对不同设备进行设置font-size
// 自适应
// ------------------------
html{
font-size: 38px;
}
@media only screen and (min-width: 320px) {
html {
font-size: 42.666px !important;
}
}
@media only screen and (min-width: 360px) {
html {
font-size: 48px !important;
}
}
@media only screen and (min-width: 375px) {
html {
font-size: 50px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 55.2px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 64px !important;
}
}
@media only screen and (min-width: 560px) {
html {
font-size: 74.666px !important;
}
}
@media only screen and (min-width: 640px) {
html {
font-size: 85.333px !important;
}
}
@media only screen and (min-width: 720px) {
html {
font-size: 96px !important;
}
}
@media only screen and (min-width: 750px) {
html {
font-size: 100px !important;
}
}
@media only screen and (min-width: 800px) {
html {
font-size: 106.666px !important;
}
}
@media only screen and (min-width: 960px) {
html {
font-size: 128px !important;
}
}
当然这是很古老的方法,可以看出来我们的设计稿是750px的,以750为基准设置font-size为100
我们可以看出这个方法通过人为比例计算,不能做到设备之间很好的覆盖有很大误差
rem布局之自动设置fontsize
所有有了下面这个根据屏幕尺寸自动设置font-size的方法,直接贴代码
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
这段代码的大意是:
如果页面的宽度超过了640px,那么页面中html的font-size恒为100px,否则,页面中html的font-size的大小为: 100 * (当前页面宽度 / 640)
但是如果ui出的图是750px的你也要适当调整一下,为了方便计算也可以调整宽度
我们以设计稿为640px为基准
width:100px;
width:1rem;//转换计算后为1rem
iphone5-1.png
iphone6-1.png
rem布局之开阔视野
该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport,该方案自动帮你设置)
这是阿里团队的高清方案布局代码,所谓高清方案就是根据设备屏幕的DPR(设备像素比,又称DPPX,比如dpr=2时,表示1个CSS像素由2个物理像素点组成)** 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值,进而达到高清效果**
关于像素请进
此方案也是默认 1rem = 100px,所以你布局的时候,完全可以按照设计师给你的效果图写各种尺寸啦。
iphone5.png
iphone6.png
到这里大家和上面的对比应该有发现些什么,我们屏幕越大,像素越高,看到的应用越多
源码
'use strict';
/**
* @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
* @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
*/
const win = window;
export default win.flex = (baseFontSize, fontscale) => {
const _baseFontSize = baseFontSize || 100;
const _fontscale = fontscale || 1;
const doc = win.document;
const ua = navigator.userAgent;
const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
let dpr = win.devicePixelRatio || 1;
if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
// 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
dpr = 1;
}
const scale = 1 / dpr;
let metaEl = doc.querySelector('meta[name="viewport"]');
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
doc.head.appendChild(metaEl);
}
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
doc.documentElement.style.fontSize = `${_baseFontSize / 2 * dpr * _fontscale}px`;
};
看到大漠写了一种关于viewport-vw-vh的适配方法,大家也可以看看相关资料
Viewport移动端适配
rem布局之px2rem
我们在写rem布局的时候发现,尽管我们设置了基准font-size,但是我们还是要去换选一下,有没有办法直接写px,让他自动换算成rem
有这样的需求当然我们也有解决方案
px2rem的原理:
px2rem.png
官方例子 https://www.npmjs.com/package/postcss-px2rem
gulp脚手架下
安装gulp-px2rem-plugin模块
npm install gulp-postcss --save-dev
gulpfile.js文件内处理
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');
gulp.task('default', function() {
var processors = [px2rem({remUnit: 75})];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
vue-webpack下面
webpack官方有简单举例
npm install postcss-loader --save-dev
var px2rem = require('postcss-px2rem');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function() {
return [px2rem({remUnit: 75})];
}
}
以下举例vue的写法,vue中以上webpack写法加载出错
在webpack.base中先处理css和postcss
{
test: /\.(css|scss)$/,
loader:"style-loader!css-loader!sass-loader!postcss-loader"
}
我们对px2rem写入vue-loader中
vue-px2rem.png
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
//使用px-rem转换
postcss: [require('postcss-px2rem')({remUnit: 100})],
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
})
}
关于1px转换
这样一切看上去如此完美了,但是又有个大问题需要注意——1px的边框在转化为rem时,在andriod webview以及部分低版本ios webview 会看不到。处理方法——让1px在编译后,依然是1px
使用postcss-px2rem插件处理px时候,需要在使用时候注意每个属性后面的分号不能省略,默认是都转换为rem,
如若某个属性不需要转换为rem,需要按照dpr不同而分别设置大小,则在后面加上注释/px/,
如若需要原样输出,则在后面加上注释/no/,此处需要多加留意,对于刚接触的我们新手来说,是个坑啊!
.border_style{
border-color: @border_color;
border-style: solid;
border-width: 1px;/*no*/
}
我们知道现在iphone大多数型号都用上了retina屏,而retina屏的分辨率相较于普通屏幕增加了一倍,也就是说原来1个像素宽度的区域内可以塞进2个像素了。我们css写的1px是一个概念像素,在retina屏的实际设备上占了2px的位置。
而对于手机屏幕整体来说,一个标注了750宽的手机(iPhone6)在css中只需要375px就能表示
scale缩放
全能型写法
@media (-webkit-min-device-pixel-ratio: 2){
.border-bottom::after {
border-bottom-width: 1px;
}
.border:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: -100%;
bottom: -100%;
left: 0;
border: 0 solid #e1e1e1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none;
-webkit-transform: scale(.5);
transform: scale(.5);
width: 200%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
满足一般需求可以使用这个
@media (-webkit-min-device-pixel-ratio: 2)
.border:after {
height: 1px;
content: '';
width: 100%;
border-top: 1px solid #e1e1e1;
position: absolute;
bottom: -1px;
right: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
rem布局 html,移动端h5之rem布局/px2rem相关推荐
- flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
- HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...
- 浅谈css3长度单位rem,以及移动端布局技巧
rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位.root!!!!!!!!!根节点,也就是 ...
- 移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...
- h5响应式布局、PC和移动端适配方案
前言 春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
- html px转换,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
- html分辨率的适配方法,pc端px转换为rem针对屏幕分辨率进行页面适配
常用的pc端网站适配方案是什么?用的最多的大概就是父元素按照设计图的宽度进行固定宽度,margin:0 auto居中,两边留白.但是有的设计图不适合这样两边留白的适配方案. 最近接手了一个pc端的项目 ...
- 移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位 当前市面上用的比较多 相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...
- rem css calc,关于使用rem单位、css函数calc()进行自适应布局
一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...
最新文章
- 北大杨超:以偏微分方程求解为例,AI如何助力科学计算?
- logback的配置文件
- paip.提升效率--调试--日志系统日志参数含义---python
- MVC5 + EF6 入门完整教程
- UIbutton系统按键(System)和图片按键(Custom)对比
- 使用Sublime text 3打造一个小巧但强大的Go语言开发IDE
- 第 5 章 File Share
- 树的表示(1)--双亲表示法
- python类的本质和跨文件全局变量(秒杀单例模式)
- Microsoft Store 微软应用商店0x80131500解决方案
- 3D目标检测评估标准
- 如何让excel表格排头一直都在_如何快速整理Excel表格?学会这一招整理表格无压力...
- PHP 加密解密函数
- MarkDown图床助手: 截图-传图-生成url 一步到位
- ROS 交叉编译介绍
- 小程序 · 手机号码中间四位隐藏
- python 幂数拟合及拟合度计算
- 【Linux\云服务器】CentOS 7.2 64位 可视化桌面的安装与卸载
- CocosCreator报:Maximum call stack size exceeded 的问题
- 关于可控核聚变的想法
热门文章
- JSON.stringify转换Date不正确的解決方法
- MFC新建文件夹、打开文件夹的实现方法
- srand(设置随机数种子)
- Java中的向下转型与向上转型
- rpm命令包安装mysql_CentOS7使用rpm包安装mysql 5.7.18
- 大橙子_橙子皮养花太棒了,酸性大,肥力足,比花肥强10倍
- 大学计算机课程考试系统C语言题库,《大学计算机基础》考试题库(含答案).doc...
- 清浊音判别 matlab,matlab语音信号处理如何判别清浊音?
- 美术学考计算机,艺术设计专业能跨专业考计算机研究生吗?
- java参数注解pam_吃透Java基础十:注解