Lucit Screen Format Media Queries¶
The following is a list of all common digital screen size formats and a useeable media query block for each one.
Media Queries¶
/*
|--------------------------------------------------------------------------
| Lucit Board Format Media Query Placeholders
|--------------------------------------------------------------------------
| Aspect ratio = width / height
| Ratios are converted using:
| min = ceil(min_ratio * 1000)
| max = floor(max_ratio * 1000)
|--------------------------------------------------------------------------
*/
/* BOARD FORMAT MEDIA QUERY : oddvertical */
@media (min-aspect-ratio: 0/1000) and (max-aspect-ratio: 399/1000) {
/*
* Format: oddvertical
* Label: Extra Vertical
* Recommended Size: 350x1000
* Aspect Ratio Range: 0 - 0.3999
*
* Add oddvertical-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : oddvertical */
/* BOARD FORMAT MEDIA QUERY : vertical */
@media (min-aspect-ratio: 400/1000) and (max-aspect-ratio: 599/1000) {
/*
* Format: vertical
* Label: Vertical
* Recommended Size: 1080x1920
* Aspect Ratio Range: 0.4 - 0.5999
*
* Add vertical-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : vertical */
/* BOARD FORMAT MEDIA QUERY : tall */
@media (min-aspect-ratio: 600/1000) and (max-aspect-ratio: 799/1000) {
/*
* Format: tall
* Label: Tall
* Recommended Size: 700x1000
* Aspect Ratio Range: 0.6 - 0.7999
*
* Add tall-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : tall */
/* BOARD FORMAT MEDIA QUERY : tallblock */
@media (min-aspect-ratio: 800/1000) and (max-aspect-ratio: 999/1000) {
/*
* Format: tallblock
* Label: Tall Block
* Recommended Size: 540x600
* Aspect Ratio Range: 0.8 - 0.9999
*
* Add tallblock-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : tallblock */
/* BOARD FORMAT MEDIA QUERY : block */
@media (min-aspect-ratio: 1000/1000) and (max-aspect-ratio: 1000/1000) {
/*
* Format: block
* Label: Block
* Recommended Size: 600x600
* Aspect Ratio Range: 1
*
* Add block-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : block */
/* BOARD FORMAT MEDIA QUERY : oddblock */
@media (min-aspect-ratio: 1001/1000) and (max-aspect-ratio: 1399/1000) {
/*
* Format: oddblock
* Label: Wide Block
* Recommended Size: 1000x833
* Aspect Ratio Range: 1.0001 - 1.3999
*
* Add oddblock-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : oddblock */
/* BOARD FORMAT MEDIA QUERY : oddball */
@media (min-aspect-ratio: 1400/1000) and (max-aspect-ratio: 1699/1000) {
/*
* Format: oddball
* Label: Wider Block
* Recommended Size: 1000x625
* Aspect Ratio Range: 1.4 - 1.6999
*
* Add oddball-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : oddball */
/* BOARD FORMAT MEDIA QUERY : widescreen */
@media (min-aspect-ratio: 1700/1000) and (max-aspect-ratio: 1800/1000) {
/*
* Format: widescreen
* Label: Widescreen
* Recommended Size: 1920x1080
* Aspect Ratio Range: 1.7 - 1.8
*
* Add widescreen-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : widescreen */
/* BOARD FORMAT MEDIA QUERY : oddposter */
@media (min-aspect-ratio: 1801/1000) and (max-aspect-ratio: 1999/1000) {
/*
* Format: oddposter
* Label: Tall Poster
* Recommended Size: 1000x526
* Aspect Ratio Range: 1.8001 - 1.9999
*
* Add oddposter-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : oddposter */
/* BOARD FORMAT MEDIA QUERY : poster */
@media (min-aspect-ratio: 2000/1000) and (max-aspect-ratio: 2222/1000) {
/*
* Format: poster
* Label: Poster
* Recommended Size: 840x400
* Aspect Ratio Range: 2 - 2.2222
*
* Add poster-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : poster */
/* BOARD FORMAT MEDIA QUERY : medianposter */
@media (min-aspect-ratio: 2223/1000) and (max-aspect-ratio: 2249/1000) {
/*
* Format: medianposter
* Label: Median Poster
* Recommended Size: 1000x447
* Aspect Ratio Range: 2.2223 - 2.2499
*
* Add medianposter-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : medianposter */
/* BOARD FORMAT MEDIA QUERY : median */
@media (min-aspect-ratio: 2250/1000) and (max-aspect-ratio: 2749/1000) {
/*
* Format: median
* Label: Median
* Recommended Size: 1000x400
* Aspect Ratio Range: 2.25 - 2.7499
*
* Add median-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : median */
/* BOARD FORMAT MEDIA QUERY : third */
@media (min-aspect-ratio: 2750/1000) and (max-aspect-ratio: 3266/1000) {
/*
* Format: third
* Label: Third
* Recommended Size: 1200x400
* Aspect Ratio Range: 2.75 - 3.2665
*
* Add third-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : third */
/* BOARD FORMAT MEDIA QUERY : bulletin */
@media (min-aspect-ratio: 3267/1000) and (max-aspect-ratio: 3717/1000) {
/*
* Format: bulletin
* Label: Bulletin
* Recommended Size: 1400x400
* Aspect Ratio Range: 3.2666 - 3.717
*
* Add bulletin-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : bulletin */
/* BOARD FORMAT MEDIA QUERY : bulletinquarter */
@media (min-aspect-ratio: 3718/1000) and (max-aspect-ratio: 3749/1000) {
/*
* Format: bulletinquarter
* Label: Bulletin Quarter
* Recommended Size: 1000x267
* Aspect Ratio Range: 3.7171 - 3.7499
*
* Add bulletinquarter-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : bulletinquarter */
/* BOARD FORMAT MEDIA QUERY : quarter */
@media (min-aspect-ratio: 3750/1000) and (max-aspect-ratio: 4250/1000) {
/*
* Format: quarter
* Label: Quarter
* Recommended Size: 1600x400
* Aspect Ratio Range: 3.75 - 4.25
*
* Add quarter-specific CSS here.
*/
}
/* END BOARD FORMAT MEDIA QUERY : quarter */
/* BOARD FORMAT MEDIA QUERY : quarterbeyond */
@media (min-aspect-ratio: 4251/1000) {
/*
* Format: quarterbeyond
* Label: Quarter Beyond
* Recommended Size: 1000x234
* Aspect Ratio Range: 4.2501+
*
* Add quarterbeyond-specific CSS here.
*
* Note:
* The docs list this as open-ended, so this uses only min-aspect-ratio.
* Your PHP helper always emits a max-aspect-ratio, so this final format
* may need a very large max_ratio value in the database if you want it
* to pass through that exact helper unchanged.
*/
}
/* END BOARD FORMAT MEDIA QUERY : quarterbeyond */