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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 对比文件内容差异_使用Py
- 下一篇： wxpython使用简介_wxpytho