本文目的:
使用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) {
}
4.观察结果,确实在不同尺寸的手机上看到不同的文字效果。
目的已达到,感谢强大的AI
文章评论