Мобильный и ПК адаптивный
нужно
- мобильный адаптивный
- Адаптивно для ПК (в пределах определенного диапазона экрана)
Принцип реализации
Используя зависимости amfe-flexible и postcss-px2rem, автоматически конвертируйте px в rem после компиляции проекта и динамически изменяйте значение размера шрифта html в соответствии с размером экрана.
Если вы хотите понять принцип самоадаптации рем, вы можете сами погуглить, и я не буду здесь говорить о принципе.
Неважно, если вы не понимаете принцип, вы можете выполнить описанную ниже операцию.
Учебник по внедрению
Первым шагом является установка зависимостей компонентов
npm install amfe-flexible -S
npm install postcss-px2rem -S
Второй шаг, импорт lib-flexible.js
Ниже приведен пример проекта vue.
Представлен во входном файле main.js
import "amfe-flexible/index.js";
Третий шаг: добавьте следующую строку кода в файл public/index.html в каталоге
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Четвертый шаг, настроить postcss-px2rem
Если это проект, созданный vue-cli3, то найдите файл vue.config.js в корневом каталоге (если он не найден, создайте новый)
Содержание конфигурации следующее
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}
Приведенный выше код помещен в фигурные скобки module.exports = {},
Полный код выглядит следующим образом:
module.exports = {
// 基本路径
publicPath: './',
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
},
// 代理
devServer: {
port: 8080,
// host: 'localhost',
https: false, // https:{type:Boolean}
open: true, // 配置自动启动浏览器
disableHostCheck: true,
"proxy": {
"/*": {
"target": "http://xxx",
"changeOrigin": true
}
}
},
}
надremUnit: 75, Параметр 75 означает, что изображение дизайна имеет размер 750 пикселей. Если ваше изображение дизайна имеет размер 640 пикселей, вы можете изменить его на 64. Если ваше изображение дизайна составляет 1920 пикселей, вы можете изменить его на 192 пикселя.
Если ваш проект построен с помощью vue-cli2
Установить зависимостиpostcss-pxtorem
npm i -D postcss-pxtorem
Найдите файл .postcssrc.js в корневом каталоге и добавьте в него следующий код:
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 75,
propList: ['*', '!border*']
}
}
}
propList представляет совпадающие свойства(что означает соответствие всем свойствам) можно использовать внутри !borderУказывает, что граница не предоставляется, так что граница 1px не станет 1rem
Если вы не хотите, чтобы px рем в css, вы можете сделать это, напишите / после стиляno/комментарий
.nav {
width: 400px;
height: 300px;
background: red;
border: 1px solid black; /*no*/
}
После приведенной выше конфигурации откройте скомпилированную страницу вашего проекта, откройте страницу отладки и измените ширину, чтобы увидеть, что значение размера шрифта html изменяется в режиме реального времени, а значение css px, которое вы написали, автоматически преобразуется в rem
Пятый шаг — сделать адаптивное решение на стороне ПК
Вышеупомянутое полностью адаптивно, если вы хотите контролировать диапазон адаптивности, например, если вы делаете проект для ПК, вы хотите сделать адаптивный между 1300px - 1800px, если он меньше 1300px, установите фиксированный шрифт html- значение размера, если оно больше 1800 пикселей. Просто установите фиксированное значение размера шрифта html.
Таким образом, страница компоновки ПК-проекта может не сжиматься и не адаптироваться все время, и она не всегда будет увеличиваться.
Ключевым принципом является управление через медиа-запросы, код выглядит следующим образом, напишите его в файле общедоступного стиля (или глобального стиля)
/* 屏幕大于1800px的时候写死html的font-size值为200px */
@media screen and (min-width: 1800px) {
html {
font-size: 200px !important;
/*no*/
}
}
/* 屏幕小于1300px的时候写死html的font-size值为130px */
@media screen and (max-width: 1300px) {
html {
font-size: 130px !important;
/*no*/
}
}
Это всего лишь пример. Вам не нужно устанавливать его на мобильном терминале. Для ПК-терминала вы можете настроить масштаб в соответствии со страницей вашего проекта.
пакетная конфигурация проекта vite
создать новыйpostcss.config.jsфайл, следующий код
Установить зависимостиpostcss-pxtorem
npm i -D postcss-pxtorem
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 192,
propList: ['*', '!border*']
}
}
}
создание корневого каталога.browserslistrcдокумент
last 2 versions
> 1%
iOS 7
last 3 iOS versions
Не забудьте сначала написать первые три шага!!!
Ступайте на яму и решите
Когда вы используете webpack для упаковки, если вы пишете в стиле/*no*/, когда вы не хотите преобразовывать px в rem, например код, упомянутый выше
/* 屏幕大于1800px的时候写死html的font-size值为200px */
@media screen and (min-width: 1800px) {
html {
font-size: 200px !important;
/*no*/
}
}
Этот px не переходит в rem зависит от комментариев, но при упаковке рабочей среды комментарии будут удалены, что заставит вас написать/*no*/Если вы не передадите это свойство css, оно не будет иметь никакого эффекта.Если комментарий будет удален из пакета, он автоматически передаст его вам.
Решение 1. Вы можете записать стиль в тег стиля файла index.html
Эта упаковка не удалит комментарии css из index.html. Если ваш веб-пакет также удаляет комментарии из index.html, вы можете использовать веб-пакет для удаления комментариев из index.html. Этот самостоятельный поиск в Google содержит много распакованного и сжатого index.html, мой проект не удалит комментарий index.html
Решение 2. При настройке sass-loader все комментарии css не удаляются при упаковке
Справочная статья:Комментарии недействительны в производственной среде postcss-px2rem в веб-пакете
Справочная статья
Использование amfe-flexible и postcss-pxtorem во внешнем интерфейсе