当前位置: 首页 > news >正文

@media screen 针对不同移动设备

@media screen针对不同移动设备-响应式设计

概念:


 

  1. /* iPhone 4 ———– */

  2. @media
  3. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  4. only screen and (min-device-pixel-ratio : 1.5) {
  5. /* Styles */
  6. }
  7. /* iPads (portrait) ———– */

  8. @media only screen
  9. and (min-device-width : 768px)
  10. and (max-device-width : 1024px)
  11. and (orientation : portrait) {
  12. /* Styles */
  13. }
  1. /* Smartphones (portrait and landscape) ———– */

  2. @media only screen
  3. and (min-device-width : 320px)
  4. and (max-device-width : 480px) {
  5. /* Styles */
  6. }
  7. /* Smartphones (landscape) ———– */

  8. @media only screen
  9. and (min-width : 321px) {
  10. /* Styles */
  11. }
  12. /* Smartphones (portrait) ———– */

  13. @media only screen
  14. and (max-width : 320px) {
  15. /* Styles */
  16. }
  17. /* iPads (portrait and landscape) ———– */

  18. @media only screen
  19. and (min-device-width : 768px)
  20. and (max-device-width : 1024px) {
  21. /* Styles */
  22. }
  23. /* iPads (landscape) ———– */

  24. @media only screen
  25. and (min-device-width : 768px)
  26. and (max-device-width : 1024px)
  27. and (orientation : landscape) {
  28. /* Styles */
  29. }
  30. /* iPads (portrait) ———– */

  31. @media only screen
  32. and (min-device-width : 768px)
  33. and (max-device-width : 1024px)
  34. and (orientation : portrait) {
  35. /* Styles */
  36. }
  37. /* Desktops and laptops ———– */

  38. @media only screen
  39. and (min-width : 1224px) {
  40. /* Styles */
  41. }
  42. /* Large screens ———– */

  43. @media only screen
  44. and (min-width : 1824px) {
  45. /* Styles */
  46. }
  47. /* iPhone 4 ———– */

  48. @media
  49. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  50. only screen and (min-device-pixel-ratio : 1.5) {
  51. /* Styles */
  52. }

相关文章:

  • 网站页面性能优化的34条黄金守则
  • IE和Firefox的Javascript兼容性总结
  • HTML本地存储之IndexedDB(1)
  • 关于Web Worker的一些心得
  • 关于Web Worker的一些心得(二)
  • displaynone与visiblehidden的区别
  • html5横、竖屏状态 以及禁止横屏
  • Ext3.2转Ext4要点
  • html5 canvas 详细使用教程
  • SVG 与 Canvas:如何选择
  • Scrum敏捷开发简介
  • 浅谈对JS闭包的理解
  • 分享几款js矢量图类库
  • Swiper说明及API手册说明
  • 浏览器兼容性汇总
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • css系列之关于字体的事
  • HTTP--网络协议分层,http历史(二)
  • java取消线程实例
  • leetcode386. Lexicographical Numbers
  • Node.js 新计划:使用 V8 snapshot 将启动速度提升 8 倍
  • PHP 7 修改了什么呢 -- 2
  • Redux系列x:源码分析
  • scrapy学习之路4(itemloder的使用)
  • Spark VS Hadoop:两大大数据分析系统深度解读
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • VUE es6技巧写法(持续更新中~~~)
  • 工程优化暨babel升级小记
  • 看图轻松理解数据结构与算法系列(基于数组的栈)
  • 思维导图—你不知道的JavaScript中卷
  • ​DB-Engines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座
  • ​无人机石油管道巡检方案新亮点:灵活准确又高效
  • $.extend({},旧的,新的);合并对象,后面的覆盖前面的
  • $.proxy和$.extend
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (vue)页面文件上传获取:action地址
  • (简单有案例)前端实现主题切换、动态换肤的两种简单方式
  • (六)Hibernate的二级缓存
  • (十二)python网络爬虫(理论+实战)——实战:使用BeautfulSoup解析baidu热搜新闻数据
  • (四)鸿鹄云架构一服务注册中心
  • *p=a是把a的值赋给p,p=a是把a的地址赋给p。
  • .net 8 发布了,试下微软最近强推的MAUI
  • .NET 常见的偏门问题
  • .NET中的Exception处理(C#)
  • .one4-V-XXXXXXXX勒索病毒数据怎么处理|数据解密恢复
  • /proc/vmstat 详解
  • [ vulhub漏洞复现篇 ] Apache APISIX 默认密钥漏洞 CVE-2020-13945
  • [2016.7 test.5] T1
  • [C++]二叉搜索树
  • [C++打怪升级]--学习总目录
  • [Docker]十.Docker Swarm讲解
  • [Enterprise Library]调用Enterprise Library时出现的错误事件之关闭办法
  • [HackMyVM]靶场 VivifyTech
  • [IE编程] 如何在IE8 下调试BHO控件/工具栏(调试Tab进程)
  • [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流