九、响应式发：rem和less（适配移动端）
一、响应式开发
响应式开发优先适配移动端又兼容到pc端
官网：https://less.bootcss.com/usage/
教程：https://www.w3cschool.cn/less/
rem和em：https://blog.csdn.net/u010132177/article/details/103725945
参考：https://www.jianshu.com/p/58a061c6e9af
1.1安装less依赖
cnpm install less less-loader --save-dev
//记录到devDependencies中，因为这是我们在开发中使用的而非在生产中使用(当然，也可以不加--save-dev)
1.1.2 安装 style-loader、css-loader
cnpm install --save-dev style-loader css-loader
【待整理】=====================
1.2 添加配置到 build/webpack.base.conf.js
【配置】
,{ //加less配置开始
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}//加less配置结尾
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}, {//【配置】加less配置开始
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}//加less配置结尾]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
1.3 在根目录 index.html下添加代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<title>hello_vue</title>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=750){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
代码解释：
<1>设置meta属性 <meta name="viewport" content="width=device-width,initial-scale=1.0">
<script>
<2>运用rem特性进行宽度适配
(function(){
let html = document.documentElement,
hWidth = html.getBoundingClientRect().width;
console.log(hWidth);
html.style.fontSize = hWidth/15 + "px";//1rem的长度
})()//根据设计图进行设计，所有的页面完成必须是基于同一个设备或者说是同一分辨率的设备，比如上面代码中的15是可以根据你所选设备的分辨率自行进行选择，最后让font-size为5的倍数，上面代码的核心是保证在不同的设备分辨率下可以动态的调整rem（1rem 就等于 html的font-size）
<3>使用less或者是sass进行css开发，我是基于vue库进行开发的，所以进行如下操作引入less编译器
npm install less less-loader --save//下载less编译器
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}//在webpack.base.conf.js 中的module模块中加入这都代码
<4> vue中使用less
<style lange="less">
@rem:25rem //这个值是如何确定的？比如我一开始的屏幕分辨率是基于iphone6 其中宽度为375px，所以此时我设置的font-size :375/15，即此时1rem为25px,所以我此时设置这个变量为25，看下面我对css变量的设置
.main{
width:280/@rem；//此时如果换在iphone6上面，在设计图上该样式的宽度为280px，这个是固定宽度，不能进行适配，所以我需要将其转尺寸换为rem来表示 此时@rem代表的是你的font-size尺寸（全套页面必须基于同一个设备分辨率来完成）即1rem， 所以280px对应的rem为280/@rem？
}
</style>
<script>
//使用原生js进行设备的适配
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
</script>
九、响应式发：rem和less（适配移动端）的更多相关文章
- 响应式布局rem、rem方法封装、移动端响应式布局
相信大家在做移动端的时候都会做各个手机的适配这种适配就是响应式布局在之前做网站的响应式从pc到手机用的是媒体查询 @media screen and (max-width: 300px){} 最大宽度 ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
- 响应式布局rem的使用
在如今移动端,响应式布局的时代,用rem作为单位已经是非常普及的一门小技巧了..rem的单位根据html的font-size来进行换算! 1.rem的兼容性: 如下图所示IE9以上就支持了rem这个属 ...
- python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- 移动端响应式布局+rem+calc()
1.媒体查询:@media only screen and (max-width: ) {},在最初做pc端时,使用各种媒体查询,因为pc的屏幕分辨率总共就几种,不嫌麻烦的重复使用类名.有很大的缺陷就 ...
- 移动端“响应式布局”’--rem
使用目的:为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果,我们使用rem的像素单位. 方法一: 1.在页面引入js,获取屏幕大小,更新rem基准. (function () { var c ...
- 响应式用法rem,需要加入这段JS
<script type="text/javascript"> $(function(){ function size() { winWidth = $(window) ...
- CSS3 Media Query 响应式媒体查询
在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...
- 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
随机推荐
- CSP2019 Emiya 家今天的饭
Description: 有 \(n\) 中烹饪方法和 \(m\) 种食材,要求: 至少做一种菜 所有菜的烹饪方法各不相同 同种食材的菜的数量不能超过总菜数的一半 求做菜的方案数. Solution1 ...
- 7.12 Varnish体系结构
备注:应用比较小,采用的架构模式 Varnish + 基本业务功能 但是一个问题是所有的资源在一台服务器上,反向代理特别多,缓存数据特别大,导致一台机器资源不够,考虑机器的拆分 Nginx 的反向代 ...
- 怎样把exe程序注册成系统服务
怎样把exe程序注册成系统服务 最近一段时间我们公司开发一款新的产品,要在服务器上运行一个服务端程序,为了方便我就希望能将这个程序注册成系统服务开机自动启动而不用每次重启系统都要手动启动程序.要实现这 ...
- js读取本地json/txt/xml存在跨越问题，可以用jsonp 读取本地json文件
想自己用 js写一个原生的ajax请求,访问本地文件,json/txt.但是demo,写了一个后,发现 原来是跨域了. js 写的原生ajax 请求代码如下 html代码 <div id=&qu ...
- NoSQL 是什么
NoSQL 全称 Not only SQL ,是一种相对较新的数据库设计方式,传统的关系型数据库使用的是固定模式,并将数据分割在多个表中,然而,对于大数据集的情况,数据量太大使其难以存放在单一的服务器 ...
- VMware安装CentOS操作系统详细步骤
目录 创建虚拟机(买电脑) 1. 创建新虚拟机 2. 自定义配置虚拟机 3. 选择虚拟机硬件兼容性 4. 安装虚拟机创建系统 5. 选择虚拟机操作系统 6. 设置虚拟机名字和存放位置 7. 设置虚拟机 ...
- INUX下抓取当前登录用户登录密码的工具：mimipenguin
前有Mimikatz,今有mimipenguin,近日国外安全研究员huntergregal发布了工具mimipenguin,一款Linux下的密码抓取神器,可以说弥补了Linux下密码抓取的空缺. ...
- Burp Suite Pro1.7.36破解版
百度网盘下载(H大会一直更新):链接: https://pan.baidu.com/s/1brjPKM7 密码: 9v4r 爱盘下载:https://down.52pojie.cn/Tools/Net ...
- Python3中找不到xrange定义和不能用len(map())
问题1:python3中找不到xrange的定义,vscode中提示未定义 解决:改成range,因为python3中取消了vscode 问题2:python3中map函数返回的是迭代器,因此无法用l ...
- 在Linux上安装Oracle服务的操作步骤
如题,将我在云服务器上安装Oracle服务的惨痛经历分享出来,期间查找的资料踩过的坑无数,希望对大家能有帮助 闲话少叙,直接开始 首先,由于服务器比较差,需要先设置swap 查看是否设置swap虚拟内 ...