1. /* 判断ipad */

  2. @media only screen

  3. and(min-device-width :768px)

  4. and(max-device-width :1024px){

  5. /* style */

  6. }

  1. /* ipad横屏 */

  2. @media only screen

  3. and(min-device-width :768px)

  4. and(max-device-width :1024px)

  5. and(orientation : landscape){

  6. /* style */

  7. }

  1. /* ipad竖屏 */

  2. @media only screen

  3. and(min-device-width :768px)

  4. and(max-device-width :1024px)

  5. and(orientation : portrait){

  6. /* style */

  7. }

  1. /* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */

  2. @media only screen

  3. and(min-device-width :320px)

  4. and(max-device-width :568px){

  5. /* style */

  6. }

  1. /* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */

  2. @media only screen

  3. and(min-device-width :320px)

  4. and(max-device-width :480px){

  5. /* style */

  6. }

  1. /* iphone5分辨率 */

  2. screen Width=320px(css像素)

  3. screen Height=568px(css像素)

  4. screen Width=640px(实际像素)

  5. screen Height=1136px(实际像素)

  6. Device-pixel-ratio:2

  1. /* iphone4-iphone4s分辨率 */

  2. screen Width=320px(css像素)

  3. screen Height=480px(css像素)

  4. screen Width=640px(实际像素)

  5. screen Height=960px(实际像素)

  6. Device-pixel-ratio:2

媒体查询判断ipad和iPhone各版本相关推荐

  1. @media媒体查询判断ipad和iPhone各版本

    Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式. /* 判断ip ...

  2. CSS媒体查询判断iphone设备

    判断iphone设备 兼容iphone4/4s @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } 兼容iph ...

  3. 运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX及横竖屏

    //iphoneX.iphoneXs @media only screen and (device-width: 375px) and (device-height: 812px) and (-web ...

  4. html 苹果xr媒体查询,运用CSS3媒体查询判断iPhoneX、iPhoneXR、iPhoneXS MAX

    //iphoneX.iphoneXs @media only screen and (device-width: 375px) and (device-height: 812px) and (-web ...

  5. 媒体查询ipad,pc端

    媒体查询 /* 判断ipad */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ ...

  6. css 媒体查询 移动端,媒体查询(pc端,移动端不同布局)

    媒体查询语法: 1.内联写法:and之后必须有空格 @media screen and (min-width:960px //判断浏览器大小条件){ body{background:red} //常规 ...

  7. CSS 媒体查询@media 适配 iPhone 6/7/8、iPhone 6/7/8 Plus、 iPhone X和ipad横竖屏

    <style lang="less" rel="stylesheet/less" type="text/less" scoped> ...

  8. 教你@media媒体查询来适配ipad iphone5678plus 各种屏幕

    <style lang="less" rel="stylesheet/less" type="text/less" scoped> ...

  9. iPhone的CSS3媒体查询

    iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...

最新文章

  1. halcon知识:对空图像的系列操作
  2. 【Java代码】坐标系说明+WGS84\GCJ02\BD09坐标系转换工具+Java坐标系转换及验证源代码分享(粘贴可用)
  3. uva10405-最长公共子序列
  4. vscode删除文件夹,VSCode:删除文件中的所有注释
  5. eNSP中AC用Web方式登录
  6. AgentWeb url监听问题
  7. JS实现轮播图(超详细代码注释)
  8. 超级玛丽java版下载jar文件_java超级玛丽混搭版jar
  9. 注册Google的步骤
  10. HTML多人联机游戏,前端实现双人联机版俄罗斯方块小游戏2(实现双人联机)
  11. 数据结构-图的应用-最小生成树(类C语言版)
  12. web开发,如何自动选定打印机进行打印(设置默认打印机打印)
  13. @vue3 element-plus 按需引入,默认英文组件修改为中文
  14. 一代神机 iPhone 6s 也终于到了“剧终之日”,下一个“钉子户机型”将会是谁
  15. 大二女生已失踪22天 最后与其接触者上吊自杀
  16. Linux comm命令
  17. 基于JAVA淮安市教育局职业教研室技能竞赛计算机毕业设计源码+系统+lw文档+部署
  18. 部署Microsoft LAPS分步指南
  19. 中国人非常喜欢6这个数字,因为大家总爱说66大顺啊。数学狂人李某人喜欢把什么都数字化,于是她把顺利这个词也定义了数量级,6代表1级顺利,66代表2级顺利,666代表3级顺利,以此类推。你看,数学狂人的
  20. Oracle ERP 11i中英对照词汇表(转)

热门文章

  1. php中文网 日历,PHP简单日历实现方法
  2. turtle 画笔设置函数
  3. 如何用命令打开域组策略
  4. javascript实现关键字搜索和匹配关键字高亮效果
  5. Mysql外键约束的创建与删除
  6. 【区块链技术工坊36期】基于“GS1+区块链”的药品疫苗溯源案例解析
  7. (十三)深入理解蓝牙BLE之“Linux系统搭建zephyr和dongle的环境”
  8. 最好用的17个渗透测试工具
  9. chrome插件推荐---自动刷新网页
  10. 中控考勤机BS版本server端开发 集成到自己的CRM 或者OA里面集成考勤机