使用chatgpt工具实现媒体查询适配各大厂商手机

article/2024/9/19 10:08:36

本文目的：

使用chatgpt工具实现媒体查询适配各大厂商手机，根据不同的尺寸显示不同颜色的文字

实验过程：

1.先查询各大手机厂商存在哪些手机尺寸机型

华为手机有多种型号和尺寸，以下是其中一些主要的型号和尺寸：

华为Mate 40 Pro+ - 6.76英寸
华为P40 Pro+ - 6.58英寸
华为Mate 30 Pro - 6.53英寸
华为P30 Pro - 6.47英寸
华为nova 8 Pro - 6.72英寸
华为nova 7 Pro - 6.57英寸
华为畅享20 Pro - 6.5英寸
华为畅享10 Plus - 6.59英寸
华为荣耀30 Pro+ - 6.57英寸
华为荣耀V30 Pro - 6.57英寸

小米手机有多种型号和尺寸，以下是其中一些主要的型号和尺寸：

小米11 Ultra - 6.81英寸
小米11 Pro - 6.81英寸
小米10 Ultra - 6.67英寸
小米10 Pro - 6.67英寸
小米10 - 6.67英寸
小米9 - 6.39英寸
红米K40 Pro+ - 6.67英寸
红米K40 Pro - 6.67英寸
红米Note 10 Pro - 6.67英寸
红米Note 9 Pro - 6.67英寸

荣耀手机有多种型号和尺寸，以下是其中一些主要的型号和尺寸：

荣耀V40 - 6.72英寸
荣耀30 Pro+ - 6.57英寸
荣耀30 Pro - 6.57英寸
荣耀V30 Pro - 6.57英寸
荣耀20 Pro - 6.26英寸
荣耀10 - 5.84英寸
荣耀9X - 6.59英寸
荣耀8X - 6.5英寸
荣耀7X - 5.93英寸
荣耀6 Plus - 5.5英寸

vivo手机有多种型号和尺寸，以下是其中一些主要的型号和尺寸：

vivo X60 Pro+ - 6.56英寸
vivo X60 Pro - 6.56英寸
vivo X50 Pro+ - 6.56英寸
vivo X50 Pro - 6.56英寸
vivo S7 - 6.44英寸
vivo S6 5G - 6.44英寸
vivo Y73s - 6.44英寸
vivo V20 - 6.44英寸
vivo NEX 3S 5G - 6.89英寸
vivo Z5i - 6.53英寸

oppo手机有多种型号和尺寸，以下是其中一些主要的型号和尺寸：

oppo Find X3 Pro - 6.7英寸
oppo Reno5 Pro+ 5G - 6.55英寸
oppo Reno5 Pro 5G - 6.55英寸
oppo Reno5 5G - 6.43英寸
oppo A94 - 6.43英寸
oppo A73 5G - 6.5英寸
oppo A53 - 6.5英寸
oppo A92 - 6.5英寸
oppo K9 5G - 6.43英寸
oppo F17 Pro - 6.43英寸

魅族手机有多种型号和尺寸，以下是其中一些主要的型号和尺寸：

魅族 18 Pro - 6.7英寸
魅族 18 - 6.2英寸
魅族 17 Pro - 6.6英寸
魅族 17 - 6.6英寸
魅族 16s Pro - 6.2英寸
魅族 16s - 6.2英寸
魅族 16Xs - 6.2英寸
魅族 Note9 - 6.2英寸
魅族 15 Plus - 5.95英寸
魅族 M6T - 5.7英寸

OnePlus 8系列手机，以下是其中几个型号和尺寸：

OnePlus 8 Pro - 6.78英寸
OnePlus 8 - 6.55英寸
OnePlus 8T - 6.55英寸

iPhone手机有多个型号和尺寸，以下是截至2021年9月的主要型号和尺寸：

iPhone 13 Pro Max - 6.7英寸
iPhone 13 Pro - 6.1英寸
iPhone 13 - 6.1英寸
iPhone 13 mini - 5.4英寸
iPhone SE (第二代) - 4.7英寸
iPhone 11 - 6.1英寸
iPhone XR - 6.1英寸
iPhone 8 Plus - 5.5英寸
iPhone 8 - 4.7英寸
iPhone SE (第一代) - 4英寸

2.根据各种尺寸进行排重和排序，得到以下尺寸（单位为英寸）：

4.7, 5.4, 5.5, 5.7, 5.84, 5.93, 6.1, 6.2, 6.26, 6.39, 6.43, 6.44, 6.47, 6.5, 6.53, 6.55, 6.56, 6.57, 6.58, 6.59, 6.67, 6.7, 6.72, 6.76, 6.78, 6.81, 6.89

3.根据以上尺寸，询问chatgpt媒体查询的代码，自动生成如下：

/* 4.7 inch */
@media (min-width: 282px) {}/* 5.4 inch */
@media (min-width: 324px) {}/* 5.5 inch */
@media (min-width: 330px) {}/* 5.7 inch */
@media (min-width: 342px) {}/* 5.84 inch */
@media (min-width: 350px) {}/* 5.93 inch */
@media (min-width: 356px) {}/* 6.1 inch */
@media (min-width: 366px) {}/* 6.2 inch */
@media (min-width: 372px) {}/* 6.26 inch */
@media (min-width: 376px) {}/* 6.39 inch */
@media (min-width: 384px) {}/* 6.43 inch */
@media (min-width: 386px) {}/* 6.44 inch */
@media (min-width: 388px) {}/* 6.47 inch */
@media (min-width: 388px) {}/* 6.5 inch */
@media (min-width: 390px) {}/* 6.53 inch */
@media (min-width: 394px) {}/* 6.55 inch */
@media (min-width: 396px) {}/* 6.56 inch */
@media (min-width: 398px) {}/* 6.57 inch */
@media (min-width: 398px) {}/* 6.58 inch */
@media (min-width: 400px) {}/* 6.59 inch */
@media (min-width: 400px) {}/* 6.67 inch */
@media (min-width: 400px) {}/* 6.7 inch */
@media (min-width: 402px) {}/* 6.72 inch */
@media (min-width: 404px) {}/* 6.76 inch */
@media (min-width: 406px) {}/* 6.78 inch */
@media (min-width: 408px) {}/* 6.81 inch */
@media (min-width: 410px) {}/* 6.89 inch */
@media (min-width: 414px) {}