Two ways to implement responsiveness using media query
premise
rely:
sass,sass-loader
1. Use media queries for each component
This method reduces the workload of rewriting the same component of different terminals. The disadvantage is that each component needs to use media queries. When a set of page components is different, it is necessary to display and hide the components (display:none!important). This method is recommended when there is little difference between different terminals.
For example:
.styleClassName{
width:200px;
@media only screen and (min-width: 1200px) {
width:100px
}
}2. Write n sets of pages and perform a media query in the components that use these pages.
The advantage of this method is that media query is more convenient, and the disadvantage is that when multiple terminals have high similarity, several sets of duplicate pages need to be written.
Therefore, this method is suitable for use when there are large differences between multiple terminals.
Example:
<template> <div> <div class="pc"> <!-- pcEnd page--> </div> <div class="pad"> <!-- padEnd page--> </div> <div class="mobile"> <!-- 移动End page--> </div> </div> </template>
<style lang="scss" scoped>
//pc terminal@media only screen and (min-width: 1200px) {
.pc {
display: block !important;
}
.pad {
display: none !important;
touch-action: auto !important;
}
.mobile {
display: none !important;
touch-action: auto !important;
}
}
//pad end@media only screen and (min-width: 768px) and(max-width: 1199px) {
.pc {
display: none !important;
}
.mobile {
display: none !important;
touch-action: auto !important;
}
.pad {
display: block !important;
touch-action: auto !important;
}
}
// Mobile@media only screen and (max-width: 767px) {
.pc {
display: none !important;
}
.mobile {
display: block !important;
touch-action: auto !important;
}
.pad {
display: none !important;
touch-action: auto !important;
}
}
</style>Media Query in Vue
Let's talk about the media query in css3 first
Media queries (English: Media queries), this feature is very practical, especially the CSS style in the website needs to be modified according to the type of the device or based on specific characteristics and device parameters.
grammar
@media mediatype and|not|only (media feature) {
CSS-Code;
}composition:
An optional media type tells the browser what type of media this code is used for. The specific media type is as follows:
-
all: Applicable to all devices (default is all if not written). -
print: Suitable for paging materials and documents viewed on the screen in print preview mode. -
screen: Mainly used for screens. -
speech: Mainly used in voice synthesizers. .
One or more media feature expressions are rules or tests required for the included CSS to take effect. There are many media features, mainly as follows:
-
aspect-ratio: Used to detect the aspect ratio of the viewport -
width: Used to detect the width of the viewport, you can use the prefixes min-width and max-width to query the minimum and maximum values respectively. -
height: Used to detect the height of the viewport, you can use the prefixes min-height and max-height to query the minimum and maximum values respectively. -
orientation: Used to detect the screen direction of the viewport -
hover: Apply different styles according to whether the user's current environment allows hovering over elements (for example, the computer can hover, but the touch screen users cannot hover)
A set of CSS rules will be applied when the test passes and the media type is correct.
The following is a general way to distinguish media channels by width
//When the minimum screen width is 992px@media screen and (min-width : 992px) {
body {
property: value
}
}
//When the screen width is minimum 768px and the maximum is maximum 991px@media screen and (min-width:768px) and (max-width:991px) {
body {
property: value
}
}
//When the maximum screen width is 767px@media screen and (max-width:767px) {
body {
property: value
}
}vue is a bit different from media queries in css3
@media cannot be used directly in vue. We must use it in combination with less or sass
Installation command
npm install sass-loader node-sass --save-dev
npm install less less-loader --save-dev
Probable problems
The version of lass or sass is too high, and the version can be reduced appropriately, corresponding to the version of vue and scaffolding
use
Method 1:
body{
background-color:red;
@media only screen and (max-width: 800px) {
background-color:green;
}
}Method 2
Write n sets of pages and perform a media query in the components that use these pages
But it needs to be introduced
The above is personal experience. I hope you can give you a reference and I hope you can support me more.