Breakpoints - Revision history

Loribel at 16:28, 27 February 2023

2023-02-27T16:28:48Z

← Older revision		Revision as of 16:28, 27 February 2023
Line 1:		Line 1:
	Voir [[DF-CSS]]		'''''Voir [[DF-CSS]]'''''

	==BreakPoints Divi==		==BreakPoints Divi==

Loribel at 16:28, 27 February 2023

2023-02-27T16:28:27Z

← Older revision		Revision as of 16:28, 27 February 2023
Line 1:		Line 1:
			Voir [[DF-CSS]]

	==BreakPoints Divi==		==BreakPoints Divi==

Loribel at 17:13, 26 February 2023

2023-02-26T17:13:03Z

← Older revision		Revision as of 17:13, 26 February 2023
Line 8:		Line 8:

	==BreakPoints DiviFree==		==BreakPoints DiviFree==
	===~~DEF - XS /~~ SM / MD / LG / XL / XXL===		=== SM / MD / LG / XL / XXL===
	~~Utilisation des breakpoints~~ de ~~divi~~ ( 576 / 980 )		* Breakpoints de Divi ( 576 - 980 )
	Responsive Design - Design version Desktop en premier		* Divi : Responsive Design - Design version Desktop en premier
			* DiviFree : Mobile First

	BreakPoints de Divi :		BreakPoints de Divi :
	* Desktop : par défault - Équivalent à lg et supérieur		* Desktop : par défault - Équivalent à lg et supérieur
	* Tablette : < 980px - Équivalent sm + md		* Tablette : < 980px - Équivalent sm + md + xs (default)
	* Mobile : < 576px - Équivalent à xs		* Mobile : < 576px - Équivalent à xs (default)

	~~Tous les~~ BreakPoints :		BreakPoints (DiviFree) :
	* ~~default~~ : ~~> 980px~~ - ~~Desktop~~		* xs : < 576px (X Small) - Téléphone vertical - Default
	* ~~xxl~~ : ~~≥ 1537px~~ (~~XX Large~~) - ~~Desktop / Écran large~~		* sm : >= 576px (Small) - Téléphone
	* xl : ~~1281px - 1536px~~ (~~X Large~~) - ~~Desktop / Écran moyen~~		* md : >= 767px (Medium) - Tablette verticale - Téléphone horizontal
	* lg : ~~981px - 1280px~~ (Large) - Tablette et Desktop / Petits écrans		* lg : >= 981 (Large) - Tablette et Desktop / Petits écrans
	* md : ~~768px - 980px~~ (~~Medium~~) - ~~Tablette verticale - Téléphone horizontal~~		* xl : >= 1280px (X Large) - Desktop / Écran moyen
	* sm : ~~576px - 767px~~ (~~Small~~) - ~~Téléphone~~		* xxl : >= 1536px (XX Large) - Desktop / Écran large
	* xs : < 576px (X Small) - Téléphone vertical

	Containers		Containers
	* lg : 1280px		* lg : max-width: 1280px
	* xl : 1500px		* xl : max-width: 1500px

	===CSS Media Query (Mobile First)===		===CSS Media Query (Mobile First)===
	<pre>		<pre>
	// X-Small devices (portrait phones, less than 576px)		// X-Small devices (portrait phones, less than 576px)
	// No media query for `xs` since this is the default		// No media query for 'xs' since this is the default

	// SM - Small devices (landscape phones, 576px and up)		// SM - Small devices (landscape phones, 576px and up)
Line 51:		Line 51:
	</pre>		</pre>

	===CSS Media Query===		===CSS Media Query (Divi) ===
	<pre>		<pre>
	/* DT DEFAULT */		/* DT DEFAULT */
	@media all and (min-width: 981px) {		@media all and (min-width: 981px) { ... }
	}

	~~@media all and (max-width: 980px) {~~
	}
	~~</pre>~~

	~~<pre>~~
	~~/* XXL Desktop large */~~
	~~@media all and (min-width: 1537px) {~~
	}

	~~/* XL Desktop large */~~
	~~@media all and (min-width: 1536px) {~~
	}

	~~/* LG Desktop large */~~
	~~@media all and (min-width: 1280px) {~~
	}

	~~/* MD - Tablet Only */~~
	~~@media all and (min-width: 980px) {~~
	}

	~~/* MD Smartphone Only */~~
	~~@media all and (min-width: 767px) {~~
	}

			/* Tablets */
			@media all and (max-width: 980px) { ... }

			/* Smartphone Only */
			@media all and (max-width: 767px) { ... }
	</pre>		</pre>

Loribel: /* CSS Media Query (Mobile First) */

2023-02-26T17:05:17Z

CSS Media Query (Mobile First)

← Older revision		Revision as of 17:05, 26 February 2023
Line 32:		Line 32:
	===CSS Media Query (Mobile First)===		===CSS Media Query (Mobile First)===
	<pre>		<pre>
	/~~* XXL Desktop large *~~/		// X-Small devices (portrait phones, less than 576px)
	~~@media all and~~ (~~min-width: 1537px~~) {		// No media query for `xs` since this is the default
	}

	/~~* XL Desktop large *~~/		// SM - Small devices (landscape phones, 576px and up)
	@media ~~all and~~ (min-width: ~~1281px) and (max-width: 1536px~~) {		@media (min-width: 576px) { ... }
	}

	/~~* LG Desktop large *~~/		// MD - Medium devices (tablets, 768px and up)
	@media ~~all and~~ (min-width: ~~981px) and (max-width: 1280px~~) {		@media (min-width: 768px) { ... }
	}

	/~~* MD - Tablet Only *~~/		// LG Large devices (desktops, 981px and up)
	@media ~~all and~~ (min-width: ~~768px) and (max-width: 980px~~) {		@media (min-width: 981px) { ... }
	}

	/~~* SM Smartphone Only *~~/		// XL - X-Large devices (large desktops, 1280px and up)
	@media ~~all and~~ (~~max~~-width: ~~767px~~) {		@media (min-width: 1280px) { ... }
	}

	/* XS - ~~Smartphone Portrait */~~		// XXL - XX-Large devices (larger desktops, 1538px and up)
	@media ~~all and~~ (~~max~~-width: ~~576px~~) {		@media (min-width: 1538px) { ... }
	}		</pre>

	~~</pre>~~
	===CSS Media Query===		===CSS Media Query===
	<pre>		<pre>

Loribel: /* BreakPoints Bootstrap */

2023-02-26T17:02:02Z

BreakPoints Bootstrap

@@ Line 100: / Line 100: @@
 * xl : ≥1200px
 * xxl : ≥1400px
 ==BreakPoints Tailwind==

Loribel at 17:01, 26 February 2023

2023-02-26T17:01:17Z

← Older revision		Revision as of 17:01, 26 February 2023
Line 30:		Line 30:
	* xl : 1500px		* xl : 1500px

			===CSS Media Query (Mobile First)===
			<pre>
			/* XXL Desktop large */
			@media all and (min-width: 1537px) {
			}

			/* XL Desktop large */
			@media all and (min-width: 1281px) and (max-width: 1536px) {
			}

			/* LG Desktop large */
			@media all and (min-width: 981px) and (max-width: 1280px) {
			}

			/* MD - Tablet Only */
			@media all and (min-width: 768px) and (max-width: 980px) {
			}

			/* SM Smartphone Only */
			@media all and (max-width: 767px) {
			}

			/* XS - Smartphone Portrait */
			@media all and (max-width: 576px) {
			}

			</pre>
	===CSS Media Query===		===CSS Media Query===
	<pre>		<pre>
Line 46:		Line 73:

	/* XL Desktop large */		/* XL Desktop large */
	@media all and (min~~-width: 1281px) and (max~~-width: 1536px) {		@media all and (min-width: 1536px) {
	}		}

	/* LG Desktop large */		/* LG Desktop large */
	@media all and (min~~-width: 981px) and (max~~-width: 1280px) {		@media all and (min-width: 1280px) {
	}		}

	/* MD - Tablet Only */		/* MD - Tablet Only */
	@media all and (min~~-width: 768px) and (max~~-width: 980px) {		@media all and (min-width: 980px) {
	}		}

	/* SM Smartphone Only */		/* MD Smartphone Only */
	@media all and (~~max~~-width: 767px) {		@media all and (min-width: 767px) {
	}		}

	~~/* XS - Smartphone Portrait */~~
	~~@media all and (max-width: 576px) {~~
	}
	</pre>		</pre>

Loribel at 15:13, 26 February 2023

2023-02-26T15:13:27Z

@@ Line 31: / Line 31: @@
 ===CSS Media Query===
 <pre>
 /*** XXL Desktop large ***/
@@ Line 42: / Line 51: @@
 /*** LG Desktop large ***/
 @media all and (min-width: 981px) and (max-width: 1280px) {
+}

Loribel: /* CSS Media Query */

2023-02-26T04:27:44Z

CSS Media Query

← Older revision		Revision as of 04:27, 26 February 2023
Line 45:		Line 45:

	/* DT DEFAULT */		/* DT DEFAULT */
	@media all and (min-width: 980px) {		@media all and (min-width: 981px) {
			}
			@media all and (max-width: 980px) {
	}		}

Loribel: /* BreakPoints DiviFree */

2023-02-26T02:51:15Z

BreakPoints DiviFree

← Older revision		Revision as of 02:51, 26 February 2023
Line 25:		Line 25:
	* sm : 576px - 767px (Small) - Téléphone		* sm : 576px - 767px (Small) - Téléphone
	* xs : < 576px (X Small) - Téléphone vertical		* xs : < 576px (X Small) - Téléphone vertical

			Containers
			* lg : 1280px
			* xl : 1500px

	===CSS Media Query===		===CSS Media Query===

Loribel: /* BreakPoints DiviFree */

2023-02-26T02:41:11Z

BreakPoints DiviFree

← Older revision		Revision as of 02:41, 26 February 2023
Line 19:		Line 19:
	Tous les BreakPoints :		Tous les BreakPoints :
	* default : > 980px - Desktop		* default : > 980px - Desktop
	* xxl : ≥ 1537px (XX-Large) - Desktop ~~XXL~~		* xxl : ≥ 1537px (XX Large) - Desktop / Écran large
	* xl : 1281px - 1536px (~~XX-~~Large) - Desktop ~~XXL~~		* xl : 1281px - 1536px (X Large) - Desktop / Écran moyen
	* lg : 981px - 1280px (Large) - Desktop L		* lg : 981px - 1280px (Large) - Tablette et Desktop / Petits écrans
	* md : 768px - 980px (Medium) - Tablette verticale - Téléphone horizontal		* md : 768px - 980px (Medium) - Tablette verticale - Téléphone horizontal
	* sm : 576px - 767px (Small) - Téléphone		* sm : 576px - 767px (Small) - Téléphone