Сценарий 1: адаптация к мобильному терминалу. Сохранение общего коэффициента масштабирования без изменений в зависимости от модели мобильного телефона.
Схема адаптации здесь использует flexible.js под Taobao lib-flexible.
1 Установите lib-гибкую
npm i lib-flexible
Много глупостей! Наверняка он должен быть по этому принципу гибким.js был очень понимающим! [Зловещий], например, не понимаю своего собственного百度 || 谷歌. Общий принцип заключается в том, чтобы спроектировать ширину эскиза в качестве эталона, эскизный проект поровну разделен на 10 частей. Затем 1/10 частей размером с корневой узел. Rem составляет 1/10 значения ширины! Да, верно! Его роль такая роль (я так понимаю)
Например, эскизный проект375pxформат, затем после введения этого flexble.js, размер шрифта корневого узла: 37,5px (1rem), затем посмотрите на код и эффект, чтобы проверить это соотношение
<!--html-->
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
// scss
<style lang="scss">
.wrapper div {
height: 1rem;
}
.box1 {
width: 2rem;
background-color: coral;
}
.box2 {
width: 4rem;
background-color: skyblue;
}
.box3 {
width: 6rem;
background-color: palegreen;
}
.box4 {
width: 8rem;
background-color: wheat;
}
.box5 {
width: 10rem;
background-color: darkred;
}
</style>
vue.config.js
Тогда как мы можем идти в ногу с дизайном, если мы не используем никаких плагинов? ? ? [собачья голова]
// -此处用的是less， scss的变量计算必须要单位一致，写起来比较麻烦这里为了方便演示所以用了less-->
<style lang="less">
@375: 37.5rem;
.wrapper div {
height: 37.5/@375;
}
.box1 {
width: 75/@375;
background-color: coral;
}
.box2 {
width: 150/@375;
background-color: skyblue;
}
.box3 {
width: 225/@375;
background-color: palegreen;
}
.box4 {
width: 300/@375;
background-color: wheat;
}
.box5 {
width: 375/@375;
background-color: darkred;
}
</style>
Практика показала, что эффект от этого конца кода такой же, как и у упомянутого выше~, то есть способ написания будет более хлопотным, и в реальном проекте он точно не будет реализован. Так что он будет использоваться дальшеpx2rem-loader
2.0 Установите загрузчик px2rem
npm i px2rem-loader -D
2.1 Конфигурация px2rem-loader
Настройте в Vue.config.js, помните重启Проект заставляет конфигурацию работать!
module.exports = {
.
.
.
chainWebpack: config => {
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader') // px2rem-loader这里只能仅限于css
.options({
remUnit: 37.5
})
},
}
Его функция состоит в том, чтобы узнать имя с первого взгляда! [Ван Чай], вот пример вышеизложенного. После установки remUnit на 37,5! Затем он автоматически поможет вам преобразовать px в rem на основе 37,5.
Например: установите ширину div на 37,5 пикселей, и результат будет следующим
width: 37.5px;
// 等价于
width: 37.5 / @375;
// 最终的结果：
width: 1rem;
<style lang="scss">
.wrapper div {
height: 37.5px;
}
.box1 {
width: 75px;
background-color: coral;
}
.box2 {
width: 150px;
background-color: skyblue;
}
.box3 {
width: 225px;
background-color: palegreen;
}
.box4 {
width: 300px;
background-color: wheat;
}
.box5 {
width: 375px;
background-color: darkred;
}
</style
Следовательно, только здесь можно добиться желаемого эффекта, и не нужно заботиться о конверсионных отношениях. Я напрямую использую пиксели, соответствующие дизайн-проекту [улыбается], а остальное оставляю на усмотрение.px2rem-loaderПапа в порядке. [эммммммм] В то время вы думали, что можете уйти с миром [улыбается], но Су не знала, что здесь есть «яма»! результат:
Так что же такое «яма»? На самом деле это не яма, а простоpx2rem-loaderЭтот плагин может быть ограничен только css, то естьlang='scss || less'Типы не поддерживаются!
- обычный css неустановленный язык
- set lang='less || scss'
Так есть ли лучшее решение? Ответ положительный.
устарелpx2rem-loader(Удалить конфигурацию, связанная с px2rem-loader)postcss-plugin-px2rem
npm install postcss-plugin-px2rem --save-dev
После установки зависимостей вам нужно всего лишь настроить два места и перезапустить проект.ojbk!
vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
/**
* 换算基数， 默认100。
* 这样的话把根标签的字体规定为1rem为`${rootValue}px`,
* 这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
*/
rootValue: 37.5,
/**
* 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，
* 例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，
* 请把此属性设为默认值
*/
exclude: /(node_module)/,
//（布尔值）允许在媒体查询中转换px。
mediaQuery: false,
}),
]
}
}
},
}
main.js
import 'lib-flexible' // 引入即可
package.json
{
"postcss": {
"plugins": {
"autoprefixer": {},
"precss": {}
}
}
}
Сценарий 2: Как адаптироваться к ПК или iPad
Или на основе приведенного выше анализа сначала отмените режим предварительного просмотра мобильного телефона и откройте режим браузера.
Когда мы настроим размер окна браузера, мы обнаружим проблему, то есть максимальный размер шрифта корневого узла составляет всего 54 пикселя, а затем он не меняется при изменении ширины экрана. Справедливости ради, если он разработан в соответствии с черновиком дизайна 1920 пикселей, размер шрифта корневого узла должен быть 192 пикселя. Зависит от! Причина не имеет смысла [хитрый смех] [хитрый смех]
Я не знаю, помните ли вы, что гибкий используется для адаптации к мобильному терминалу, но если вы используете его напрямую для адаптации к немобильному терминалу, возникнут некоторые проблемы. [Wangchai][Wangchai] Посмотрите на исходный код
// flexible.js
// 本篇文章以dpr为1的情况来分析
function refreshRem() {
var width = docEl.getBoundingClientRect().width
if (width / dpr > 540) {
width = 540 * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
Нетрудно видеть из вышеуказанного анализа кода. Когда ширина> 540 есть, с не изменена. Итак, если вы хотите, чтобы размер шрифта корневого шрифта согласуется с описанием, то 540 изменяется на динамический.
// flexible.js
function refreshRem() {
var width = docEl.getBoundingClientRect().width
if (width / dpr > width) {
width = width * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
Затем вы начинаете кодировать на своем широком дисплее 1920px в зависимости от проекта проекта. Можно сказать, что кодирование на некоторое время прохладно, и все время было весело все время [улыбаться], и, наконец, вы не можете быть счастливы, когда вы закончите работать отлично.
В результате у продукта дома есть сверхширокий изогнутый экран 21:9 (3440*1440), который открывает продукт, который вы считаете идеальным, а затем происходит удивительная сцена!
ахххххххххххххххххххххх
Шрифт слишком крупный! ! Ослепить глаза моей собаки [Ван Чай] Так что я должен изменить это здесь, пусть он адаптируется в определенном диапазоне, и это не изменится с изменением экрана, если оно не находится в этом указанном диапазоне, идеально ~
// flexible.js
function refreshRem() {
var width = docEl.getBoundingClientRect().width
// 当屏幕超过1920px以后就不在随着屏幕的变大而变大了
if (width / dpr > 1920) {
width = 1920 * dpr
}
// 当屏幕小于1300px以后就不再随着屏幕的变小而变小了
if (width / dpr < 1300) {
width = 1300 * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
flexible.rem = win.rem = rem
}
Вышесказанное является общей идеей, потому что я работаю над своим собственным блогом и просто хочу записывать проблемы, с которыми сталкиваюсь. Это чисто личное резюме, могут быть расхождения в понимании, пожалуйста, поправьте меня~ Я смиренно принимаю это. хахахаха
В заключение
-
flexible.js: динамически устанавливать размер шрифта корневого узла в соответствии с шириной экрана (поскольку rem масштабируется в соответствии с размером шрифта корневого узла)- Но корень максимального размера шрифта по умолчанию составляет 54 пикселя, поэтому ширина экрана не превышает 540 пикселей по ширине с увеличением и увеличением. Если вам нужно настроить его, чтобы изменить исходный код под Jiuhaola
- Если вы настраиваете его, рекомендуется скопировать его js в свой собственный проект.
-
px2rem-loader: преобразовать px в rem- Недостаток: можно преобразовать только обычные стили css, если установлено lang='less || scss', его нельзя преобразовать в rem
-
postcss-plugin-px2rem: также преобразует px в rem, ноБольше зависаний,лучше[Ванчай]
Прикрепленная информация о проекте
{
"name": "kaka-blog",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --copy",
"build:dev": "vue-cli-service build --mode development --report",
"build:test": "vue-cli-service build --mode test --report",
"build:prod": "vue-cli-service build --mode production --report",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
"less-loader": "^6.1.1",
"lib-flexible": "^0.3.2",
"sass-loader": "^8.0.2",
"screenfull": "^5.0.2",
"vue": "^2.6.11",
"vue-router": "^3.3.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^4.0.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"github-markdown-css": "^4.0.0",
"highlight.js": "^10.0.3",
"node-sass": "^4.14.1",
"postcss-plugin-px2rem": "^0.8.1",
"px2rem-loader": "^0.1.9",
"speed-measure-webpack-plugin": "^1.3.3",
"terser-webpack-plugin": "^3.0.3",
"thread-loader": "^2.1.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-loader": "^15.9.2",
"vue-markdown-highlight": "^1.0.5",
"vue-markdown-loader": "^2.4.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.8.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": ["plugin:vue/essential", "eslint:recommended"],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": [
1,
{
"vars": "all",
"args": "after-used"
}
]
}
},
"postcss": {
"plugins": {
"autoprefixer": {},
"precss": {}
}
},
"browserslist": ["> 1%", "last 2 versions", "not dead"]
}