文档章节

响应式设计中相关尺寸css3媒介查询

spademan
 spademan
发布于 2013/11/27 18:47
字数 124
阅读 53
收藏 1
  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. }

© 著作权归作者所有

spademan
粉丝 8
博文 92
码字总数 39247
作品 0
广州
前端工程师
私信 提问
使用 Bootstrap 和 Spring MVC 实现响应式 Web 设计

简介 响应式Web设计是一种创建Web应用程序的新方法。一旦采用响应式Web设计创建出应用程序,那么该Web应用程序将能轻而易举地运行于包括移动和手持设备在内的任意设备之上。Twitter公司开源了...

oschina
2013/02/14
22.8K
16
响应式 Web 设计技巧

什么是响应式设计? iOS 和 Android 的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的...

凡尘里的一根葱
2015/11/24
158
0
响应式方案调研及前端开发管理思考

网易首页响应式风格实现技术调研 网易首页实现页面(字体)响应式风格的方式是在不同尺寸的视口中使用不同的容器类,如图 1所示。当视口大于等于1420px时,使用大尺寸容器类 (index20171200...

浩瀚动酷
2018/06/27
0
0
CSS3 Media Queries 实现响应式设计

在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并...

BearCatYN
2014/06/10
88
0
响应式Web设计——自定义网页字体

多年来我们一直被迫使用一组单调乏味的Web安全字体。当网页设计中确实需要一些优雅的字体时,我们通常都是使用图片来替代,并对元素使用text-indent规则将实际的文本移出视口范围。 曾有一些...

生气的散人
2013/03/07
3.4K
4

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
693
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
39
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
25
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
74
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
73
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部