css样式匹配苹果个型号手机

/*适配苹果X*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .header_nav {
        top: 44px;
    }
}

/*适配苹果X smart Max*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    .header_nav {
        top: 44px;
    }
}

/*适配苹果XR */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) {
    .header_nav {
        top: 44px;
    }
}

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    .header_nav {
        top: 44px;
    }
}

/*适配,6,7,8*/
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
    
}

/*适配,6+,7+,8+*/
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
   
}

/*适配,5*/
@media only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
   
}

/*适配,4*/
@media only screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
 
}

js 处理

// iPhone X、iPhone XS 
    var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
    // iPhone XS Max 
    var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
    // iPhone XR 
    var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;

    if(isIPhoneX || isIPhoneXSMax || isIPhoneXR){
        alert("是新手机");
    }else{
        alert("否");
    }
好的,以下是一个简单的淘宝单个商品页面的 HTML 和 CSS 代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝商品详情页</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>淘宝商品详情页</h1> </header> <main> <section class="product-image"> <img src="https://img.alicdn.com/bao/uploaded/i3/2206816847735/O1CN01ZJ5JFt1KONP6ZQWQf_!!0-item_pic.jpg_360x360Q50s50.jpg_.webp" alt="商品图片"> </section> <section class="product-info"> <h2 class="product-title">Apple iPhone 12 128GB 黑色 移动联通电信5G全网通手机</h2> <p class="product-price">¥6299.00</p> <p class="product-desc">全新 Apple A14 芯片,全新平面化边框设计,4GB RAM + 128GB ROM,5G全网通,支持Face ID、NFC等功能。</p> <button class="add-to-cart-btn">加入购物车</button> </section> </main> <footer> <p>版权所有 © 淘宝</p> </footer> </body> </html> ``` ```css body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #FF4200; color: #fff; padding: 20px; text-align: center; } main { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; } .product-image { flex: 1 0 360px; margin-right: 20px; } .product-info { flex: 1 1 500px; } .product-title { font-size: 24px; font-weight: bold; margin-top: 0; margin-bottom: 20px; } .product-price { font-size: 36px; font-weight: bold; margin-top: 0; margin-bottom: 20px; } .product-desc { font-size: 16px; margin-bottom: 20px; } .add-to-cart-btn { background-color: #FF4200; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .add-to-cart-btn:hover { background-color: #E53C00; } ``` 这个示例页面包含了商品图片、商品标题、商品价格、商品描述和加入购物车按钮等元素。通过 CSS 样式设置,实现了简单的响应式布局。 注意:这只是一个简单的示例,实际开发中可能需要更多的 HTML 和 CSS 代码来实现更多的功能和样式
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值