CSS flexible layout FLEX, media query and mobile click event implementation
flex layout Definition: The element of By default, a container has two axes: the horizontal The starting position of the main axis (the intersection with the border) is called Items are arranged along the main axis by default. The main axis space occupied by a single item is called
How to use flexible layout: just set Container properties
.box
{
flex-direction: row | row-reverse | column | column-reverse;
}row row-reverse column column-reverse
<style>
ul:nth-of-type(1){ flex-direction:row;}
ul:nth-of-type(2){ flex-direction:row-reverse;}
ul:nth-of-type(3){flex-direction:column;}
ul:nth-of-type(4){flex-direction:column-reverse;}
</style>
.box
{
flex-wrap : nowrap | wrap | wrap-reverse ;
}nowrap wrap wrap-reverse
<style>
ul:nth-of-type(1){flex-wrap:nowrap;}
ul:nth-of-type(2){flex-wrap:wrap;}
ul:nth-of-type(3){flex-wrap:wrap-reverse;}
</style>
.box
{
justify-content: flex-start | flex-end | center | space-between | space-around;
}flex-start flex-end center space-between space-around
<style>
ul:nth-of-type(1){justify-content:flex-start;}
ul:nth-of-type(2){justify-content:flex-end;}
ul:nth-of-type(3){justify-content:center;}
ul:nth-of-type(4){justify-content:space-between;}
ul:nth-of-type(5){justify-content:space-around;}
</style>
flex-start flex-end center baseline stretch
<style>
ul:nth-of-type(1){align-items:flex-start;}
ul:nth-of-type(2){align-items:flex-end;}
ul:nth-of-type(3){align-items:center;}
ul:nth-of-type(4){align-items:baseline;}
ul li{ height:auto;}
ul:nth-of-type(5){align-items:stretch;}
</style>
flex-start flex-end center space-between space-around stretch
<style>
ul:nth-of-type(1){ flex-wrap:wrap; align-content:flex-start;}
ul:nth-of-type(2){ flex-wrap:wrap; align-content:flex-end;}
ul:nth-of-type(3){flex-wrap:wrap;align-content:center;justify-content:center;}
ul:nth-of-type(4){ flex-wrap:wrap; align-content:space-between;}
ul:nth-of-type(5){ flex-wrap:wrap; align-content:space-around;}
ul li{ height:auto;}
ul:nth-of-type(6){flex-wrap:wrap;align-content:stretch;justify-content:center;}
</style>
Shorthand way: Project Properties
<style>
ul li:nth-of-type(3){order:1;}
ul li:nth-of-type(2){order:2;}
ul li:nth-of-type(1){order:3;}
ul li:nth-of-type(5){order:4;}
ul li:nth-of-type(4){order:5;}
</style>
<style>
ul li:nth-of-type(1){ flex-grow:1;}
ul li:nth-of-type(2){ flex-grow:1;}
</style>
If If Negative values are invalid for this property.
<style>
ul li:nth-of-type(1){flex-shrink:0;}
ul li:nth-of-type(2){flex-shrink:1;}
ul li:nth-of-type(3){flex-shrink:2;}
ul li:nth-of-type(4){flex-shrink:3;}
</style>
<style>
ul li:nth-of-type(1){ flex-basis:50%;}
</style>
<style>
ul{align-items:flex-start;}
ul li{height: auto}
ul li:nth-of-type(1){ align-self:auto;}
ul li:nth-of-type(2){ align-self:flex-start;}
ul li:nth-of-type(3){ align-self:center; }
ul li:nth-of-type(4){ align-self:flex-end;}
ul li:nth-of-type(5){ align-self:baseline;line-height: 80px;}
ul li:nth-of-type(6){ align-self:stretch;}
</style>
This property has two shortcut values: It is recommended to use this property instead of writing three separate properties separately, because the browser will infer the relevant values. Media Inquiries
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
/*
viewport
Definition: viewport is the area on the device's screen that can be used to display our web page. 1px in CSS is not equal to 1px on the device because of different pixel densities. layout viewport: layout viewport. Generally, browsers on mobile devices set a viewport meta tag by default to define a virtual layout viewport, which is used to solve the display problem of early pages on mobile phones. visual viewport: the visual viewport sets the visible area of the physical screen, the physical pixels displayed on the screen. For the same screen, devices with high pixel density can display more pixels. ideal viewport: the ideal viewport is obtained through the meta tag. Example: <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
* Mobile layout * The value of the content attribute of the meta tag * width=device-width, height=device-height, make the current viewport width and height equal to the width and height of the device. You can also set a fixed value and try not to use height
* initial-scale=1.0; Initialization scale: 0.25-1.0
* maximum-scale=1.0; Set the maximum zoom ratio: 0.25-1.0
* minimum-scale=1.0; Set the minimum scale ratio: 0.25-1.0
* user-scalable=no; whether to allow user scaling, the default is yes, if set to no: then minimax-scale and maximum-scale will be ignored because scaling is not allowed * Example:
* <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
* Mobile gesture events* Differences with PC events* PC mousemove, mouseup, mousedown will fail or work abnormally on mobile* PC click events can be used, | Don't talk about the 300ms problem | But there will be a 300ms delay problem: Early mobile phones: used to determine whether it is double-clicking to zoom in or out*
* Mobile terminal events* touchstart: triggered by finger pressing* touchmove: triggered when finger moves* touched: triggered when finger leaves* touchcancel: triggered when event is interrupted*
* Mobile event execution order: touchstart->touchmove->touched->click
*
* The touchEvent object has three more TouchList properties compared to the PC event. * touches is a list of all fingers on the current screen. * targetTouches is a list of fingers on the current DOM object. * changedTouhes is a list of finger objects that have changed their state. *
* Each TouchList has multiple objects, and each Touch object has the following object properties: * screenX: distance from the left side of the screen * screenY: distance from the top of the screen * clientX: distance from the left side of the browser * clientY: distance from the top of the browser * pageX: distance from the left side of the page * pageY: distance from the top of the page * target: current element being touched * identifier: id of the current touch object, used to identify the finger * radiusX, radiusY: range of finger touch */
</script>
<style type="text/css">
/*Media query one*/
* {
margin: 0;
padding: 0;
}
body {
background-color: pink;
}
/*Use @media query to achieve responsive layout effects, and set different styles according to different conditions*/
/*screen means screen, min-width: 1200px means the minimum width is 1200px. In other words, what is the style when the screen width is greater than or equal to 1200px*/
@media only screen and (min-width:1200px) {
/*Write the style here*/
body {
background-color: red;
}
}
/*Style displayed when the screen width is greater than 800 and less than 1199*/
@media only screen and (min-width: 800px) and (max-width: 1199px) {
body {
background-color: aqua;
}
}
/*Style displayed when the screen width is greater than 400 and less than 640*/
/*//If there is no connected part in the media query, the default part will be displayed*/
@media only screen and (min-width: 400px) and (max-width: 640px) {
body {
background-color: yellow;
}
}
</style>
<!--
Media query 2 <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
<link rel="stylesheet" href="css/m320.css" media="only screen and (max-width:320px)">
<link rel="stylesheet" href="css/m375.css" media="only screen and (min-width:321px) and (max-width:375px)">
<link rel="stylesheet" href="css/m414.css" media="only screen and (min-width:376px) and (max-width:414px)">
-->
</html>Mobile click event
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
// Mobile gestures var box = document.querySelector('#box')
// PC-side click event box.addEventListener('click', function(e) {
console.log('===========click============');
console.log(e);
});
//Finger press box.addEventListener('touchstart', function(e) {
console.log('===========touchstart============');
// Fn(e);
})
//Finger movement box.addEventListener('touchmove', function(e) {
console.log('==========touchmove============');
Fn(e);
})
//Finger raised box.addEventListener('touchend', function() {
console.log('============touchend==========');
});
//Start after being interrupted box.addEventListener('touchcancel', function() {
alert('============interrupted================');
})
var touchesH1 = document.querySelector('#box h1:nth-of-type(1)');
var targettouchesH1 = document.querySelector('#box h1:nth-of-type(2)');
var changetouchesH1 = document.querySelector('#box h1:nth-of-type(3)');
function Fn(e) {
touchesH1.innerHTML = 'touches' + e.touches.length;
targettouchesH1.innerHTML = 'targettouches' + e.targetTouches.length;
changetouchesH1.innerHTML = 'changetouches' + e.changedTouches.length;
}
// Using the touch library (mobile)
$('#box').tap(function() {
console.log('====tap====')
})
$('#box').longTap(function() {
console.log('====long tap====')
})
$('#box').doubleTap(function() {
console.log('====double tap====')
})
$('#box').swiperLeft(function() {
console.log('====left tap====')
})
// Using the zepto library (mobile)
$("#box").tap(function() {
console.log('======tap=========');
})
$("#box").singleTap(function() {
console.log('======singleTap=========');
})
$("#box").doubleTap(function() {
console.log('======doubleTap=========');
})
$("#box").longTap(function() {
console.log('======longTap=========');
})
$("#box").swipe(function() {
console.log('======swipeTap=========');
})
// Custom Touch Event Library // Encapsulates a custom touch event library // Note: The semicolon in front of this is to prevent other libraries from being referenced without a semicolon at the end, which may cause problems when the code is compressed later;
(function(window, undefined) {
var query = function(selector) {
return query.fn.init(selector);
};
query.fn = query.prototype = {
//The initialization method simulates the method of obtaining elements, but what is obtained here is not the real element. The real element is stored in the element property of the entire object init: function(selector) {
if (typeof selector == 'string') {
this.element = document.querySelector(selector);
return this;
}
},
//Click, handler is the callback function, which is the response function after clicking tap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//Time variables used to distinguish and long press, make a time difference judgment var startTime, endTime;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
//Record a time when pressed startTime = new Date().getTime();
break;
case 'touchend':
//The leaving event records a time endTime = new Date().getTime();
if (endTime - startTime < 500) {
//When the gesture leaves, callback handler();
}
break;
}
}
},
//Long press longTap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//This mobile event is to resolve conflicts with other events this.element.addEventListener('touchmove', touchFn);
var timeId;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
//When the press reaches 500ms, we consider it as a long press clearTimeout(timeId);
timeId = setTimeout(function() {
handler();
}, 500);
break;
case 'touchend':
// Clear the timer when leaving clearTimeout(timeId);
break;
case 'touchmove':
//Once moved, clear the long press timer clearTimeout(timeId);
break;
}
}
},
//Double-click doubleTap: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//Record the number of times var tapCount = 0,
timeId;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
//Record tapCount++ once when pressed;
//When you just come in, clear the timer clearTimeout(timeId);
timeId = setTimeout(function() {
//If it reaches 500ms, we think it is not a double click, and we need to clear tapCount tapCount = 0;
}, 500);
break;
case 'touchend':
// Clear the timer when leaving if (tapCount == 2) {
//When pressed twice, it is considered a double click handler();
//After triggering a double click, the number of clicks is cleared tapCount = 0;
//Clear timer clearTimeout(timeId);
}
break;
}
}
},
//SwiperLeft: function(handler) {
this.element.addEventListener('touchstart', touchFn);
this.element.addEventListener('touchend', touchFn);
//Gesture trigger coordinates var startX, startY, endX, endY;
function touchFn(e) {
switch (e.type) {
case 'touchstart':
//Record the starting coordinates when pressing startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
break;
case 'touchend':
//Record the end coordinate when leaving endX = e.changedTouches[0].pageX;
endY = e.changedTouches[0].pageY;
//Judge whether it is a left or right slide&& //Judge whether it is a left slide or a right slideif (Math.abs(endX - startX) >= Math.abs(endY - startY) && (startX - endX) >= 25) {
handler();
}
break;
}
}
},
}
query.fn.init.prototype = query.fn;
window.$ = window.query = query;
}(window, undefined))
</script>
</html>This concludes this article about CSS flexible layout FLEX, media query and the implementation of mobile click events. For more relevant CSS flexible layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: SQL-based query statements
>>: A Brief Discussion on the Navigation Window in Iframe Web Pages
![Centos 7.4 server time synchronization configuration method [based on NTP service]](/upload/images/67caeb8a142d5.webp)
Recommend
uni-app implements NFC reading function
This article shares the specific code of uni-app ...
Examples of implementing progress bars and order progress bars using CSS
The preparation for the final exams in the past h...
Use Grafana+Prometheus to monitor MySQL service performance
Prometheus (also called Prometheus) official webs...
Unzipped version of MYSQL installation and encountered errors and solutions
1 Installation Download the corresponding unzippe...
Say goodbye to hard coding and let your front-end table automatically calculate the instance code
Preface When my team was developing the tax syste...
Detailed explanation of Js class construction and inheritance cases
The definition and inheritance of classes in JS a...
Pure CSS implementation of radio and checkbox effect example
radio-and-checkbox Pure CSS to achieve radio and ...
How to deploy Redis 6.x cluster through Docker
System environment: Redis version: 6.0.8 Docker v...
Learn about JavaScript closure functions in one article
Table of contents Variable Scope The concept of c...
How to enter directory/folder in Linux without using CD command
As we all know, without the cd command, we cannot...
Summary of common tool examples in MySQL (recommended)
Preface This article mainly introduces the releva...
js implements single click to modify the table
Pure js implements a single-click editable table ...
When to use table and when to use CSS (experience sharing)
The main text page of TW used to have a width of 8...
How to change the website accessed by http to https in nginx
Table of contents 1. Background 2. Prerequisites ...
Vant uploader implements the drag-and-drop function for uploading pictures (set as cover)
The effect diagram is as follows: <!DOCTYPE ht...