Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Optimisation mobile et Responsive Webdesign - 2014

2 942 vues

Publié le

Partie technique de mes cours sur la mobilité donnés en master à l'Université de Strasbourg.

Publié dans : Technologie
  • Soyez le premier à commenter

Optimisation mobile et Responsive Webdesign - 2014

  1. 1. • • • • • • • •
  2. 2. • • •
  3. 3. • •
  4. 4. – – –
  5. 5. – – –
  6. 6. • – –
  7. 7. – – –
  8. 8.
  9. 9. • • • •
  10. 10. • • •
  11. 11. • • – – – –
  12. 12. • • • – – –
  13. 13. • • – – – – – –
  14. 14. • <meta name="viewport" content=" … ">
  15. 15. <meta name="viewport" content="width=640"> <meta name="viewport" content="width=320">
  16. 16. <meta name="viewport" content="width=device-width">
  17. 17. <meta name="viewport" content="initial-scale=1.0">
  18. 18. • •
  19. 19. <meta name="viewport" content="width=device- width, initial-scale=1">
  20. 20. width=device-width/ width=320 height=device-height/ height=640 initial-scale=2.0 user-scalable=no / yes minimum-scale=0.5 maximum-scale=2.5 target- densityDpi=high-dpi
  21. 21. @viewport { width: device-width; } @-ms-viewport{ width: device-width; } • • •
  22. 22. • • •
  23. 23. <linkrel="stylesheet" type="text/CSS"media="screenand (max- width: 480px)" href="mobile.CSS" />
  24. 24. body { max-width: 1024px; } @media all and (max-width:480px) { body { width: auto; /* et pleinsd’autrestrucsqui s’appliquerontaux petites écrans! */ } }
  25. 25. body{ background-color:rgb(211, 189, 204); } @media (max-width : 780px) { body{ background-color:rgb(233, 215, 163); } }
  26. 26. • • • 
  27. 27. • • • • •
  28. 28. • • • • •
  29. 29. • • • •
  30. 30. • – – –
  31. 31. .parent{overflow: hidden}
  32. 32. : .brother{overflow: hidden}
  33. 33. • -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  34. 34. element{ overflow: hidden; }
  35. 35. element{ word-wrap: break-word; }
  36. 36. element{ overflow: hidden; text-overflow: ellipsis; }
  37. 37. img{ max-width: 100%; width: auto; height: auto; /*fixing ie*/ }
  38. 38. body { font:1em/1.5em 'Verdana', 'Arial', sans-serif; } @media screen and (max-width:800px) { body { font-size:0.8em; } } @media screen and (max-width:400px) { body { font-size:0.7em; } }
  39. 39. html { font-size: 14px} P { font-size: 1 rem; } /* =14px */ @media screen and (max-width:800px) { html { font-size: 12px} /* => p = 12px */ } @media screen and (max-width:400px) { html { font-size: 16px} /* => p = 16px */ }
  40. 40. • – – – –
  41. 41. – – – –
  42. 42. • •
  43. 43. • • •
  44. 44. • • • • – –
  45. 45. • • •
  46. 46. • • •
  47. 47. • • • •
  48. 48. • • 
  49. 49. • • • • •
  50. 50. • •
  51. 51. • • • • • • • •
  52. 52. • • •
  53. 53. background: linear-gradient(top, #1e5799 0%,#207cca 51%,#7db9e8 100%); /* W3C */ background: -moz-linear-gradient(top, #1e5799 0%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
  54. 54. border-radius : 10px ; Border-radius : 10px 5px 10px 5px ;
  55. 55. box-shadow: 10px 10px5px #888; box-shadow: 0 0 0 3px red, 0 0 0 5px yellow, 0 0 0 7px grey;
  56. 56. • • •
  57. 57. • • •
  58. 58. • • • • •
  59. 59.
  60. 60. • • • • •
  61. 61.
  62. 62. • • •
  63. 63. • • 
  64. 64. display: none
  65. 65. • •
  66. 66. • • • •
  67. 67. • • • •
  68. 68. • •
  69. 69. • • • • •
  70. 70. background-size: 100% 100%; background-size: 250px 70px;
  71. 71. body { -webkit-text-size-adjust:100%; -ms-text-size-adjust:none; }
  72. 72. <!–Iphone4 & hdpi114* 114 px--> <linkrel="apple-touch-icon- precomposed"sizes="114x114"href="img/apple-touch-icon.png"> <!–iphone3G et mdpi72* 72px --> <linkrel="apple-touch-icon-precomposed"sizes="72x72"href="img/apple- touch-icon.png"> <!--Plus vieux appareils : 57 * 57 px--> <linkrel="apple-touch-icon-precomposed"href="img/apple-touch-icon- precomposed.png"> • •
  73. 73. • • • <!--[if (ltIE 9)&(!IEMobile7)]><linkrel="stylesheet" href="desktop.CSS" media="all"><![endif]--> • • • •
  74. 74. • •
  75. 75. • • •
  76. 76. • • • • •
  77. 77. – – –
  78. 78.
  79. 79.
  80. 80. • • • •
  81. 81. • • •
  82. 82. • • • •
  83. 83.
  84. 84.
  85. 85. • • •
  86. 86. • • • • • •

×