{"json_modified": "2016-03-28T08:28:27.349442", "uuid": "ff28782a-6a99-4e65-ab4f-4c08ae626cd4", "title": "The building blocks of responsive design", "url": "/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks", "tags": ["Mobile", "CSS3", "Responsive Design", "Apps", "HTML5"], "translations": [{"uuid": "f81c7a27-8b8e-43c2-acbe-8a14b5e687cb", "title": "Los componentes b\u00e1sicos del dise\u00f1o adaptable", "url": "/es/docs/Web/Apps/app_layout/responsive_design_building_blocks", "tags": ["aplicaciones", "CSS3", "moviles", "HTML5", "dise\u00f1o de respuesta"], "summary": "Para los desarrolladores Web, es muy com\u00fan que se les pida\u00a0crear \u00a0un sitio web o aplicaci\u00f3n que cambie su interfaz dependiendo del navegador o del dispositivo que accede al sitio para proporcionar una experiencia optimizada. <span id=\"result_box\" lang=\"es\"><span class=\"hps\">Una posibilidad</span><span class=\"hps\"> es crear</span> <span class=\"hps\">diferentes</span> <span class=\"hps\">versiones de</span> <span class=\"hps\">un sitio</span> <span class=\"hps\">/</span> <span class=\"hps\">aplicaci\u00f3n</span> <span class=\"hps\">para diferentes</span> <span class=\"hps\">plataformas o</span> <span class=\"hps\">navegadores</span> <span class=\"hps\">y as\u00ed</span>\u00a0servirlos apropiadamende despu\u00e9s de detectar qu\u00e9 navegador o plataforma est\u00e1 mirando su sitio.\u00a0<span class=\"hps\">Pero esto es</span> <span class=\"hps\">cada vez m\u00e1s ineficiente:</span><span>\u00a0el \"escaneo del navegador\" </span> <span class=\"hps\">es</span> <span class=\"hps\">inherentemente</span> <span class=\"hps\">propenso a errores</span><span>,</span> <span class=\"hps\">y mantener m\u00faltiples</span> <span class=\"hps\">copias de su</span>\u00a0<span class=\"hps\">c\u00f3digo</span> <span class=\"hps\">puede llegar a</span> <span class=\"hps\">ser una pesadilla.</span></span>", "localization_tags": ["inprogress"], "locale": "es", "last_edit": "2015-02-16T03:42:58", "review_tags": []}, {"uuid": "604a8795-4be6-40d5-a40f-ef2d1256d197", "title": "Les fondations du responsive design", "url": "/fr/docs/Web/Apps/app_layout/responsive_design_building_blocks", "tags": ["Apps", "MediaQueries", "ResponsiveDesign", "HTML5", "Mobile", "CSS3"], "summary": "Pour les d\u00e9veloppeurs web, il est maintenant assez commun d'\u00eatre appel\u00e9 pour cr\u00e9er un site web ou une application qui change son interface utilisateur en fonction du navigateur ou du dispositif acc\u00e9dant au site, pour fournir une exp\u00e9rience optimis\u00e9e. Une premi\u00e8re approche pour cela consiste \u00e0 cr\u00e9er diff\u00e9rentes versions de votre site/application pour diff\u00e9rentes plates-formes ou navigateurs et les g\u00e9n\u00e9rer de fa\u00e7on appropri\u00e9e apr\u00e8s la d\u00e9tection de la plate-forme ou du navigateur qui se connecte \u00e0 votre site. Cependant cette m\u00e9thode est de plus en plus inefficace : la d\u00e9tection de navigateur am\u00e8ne facilement \u00e0 des erreurs, et la maintenance de plusieurs versions de votre code peut s'av\u00e9rer un cauchemar.", "localization_tags": ["inprogress"], "locale": "fr", "last_edit": "2015-10-26T10:28:47", "review_tags": []}, {"uuid": "c2e7631a-f0e8-4eb0-b568-82963582f11f", "title": "\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u30d6\u30ed\u30c3\u30af\u306e\u4f5c\u308a\u65b9", "url": "/ja/docs/Web/Apps/app_layout/responsive_design_building_blocks", "tags": ["Mobile", "CSS3", "Responsive Design", "Apps", "HTML5"], "summary": "\u73fe\u5728Web\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306eUI\u3092\u3001\u4f7f\u7528\u3057\u3066\u3044\u308b\u30d6\u30e9\u30a6\u30b6\u3084\u6a5f\u5668\u306b\u3088\u3063\u3066\u5909\u5316\u3055\u305b\u3001\u305d\u308c\u305e\u308c\u306b\u5fdc\u3058\u3066\u6700\u9069\u5316\u3055\u308c\u305f\u4f53\u9a13\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u304c\u4e00\u822c\u7684\u306b\u306a\u3063\u3066\u304d\u3066\u3044\u307e\u3059\u3002\u305d\u306e\u305f\u3081\u306e\u4e00\u3064\u306e\u65b9\u6cd5\u3068\u3057\u3066\u3001\u4f7f\u7528\u3055\u308c\u308b\u6a5f\u5668\u3084\u30d6\u30e9\u30a6\u30b6\u306b\u5408\u308f\u305b\u3066\u7570\u306a\u308b\u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u3092\u4f5c\u308a\u3001\u305d\u308c\u305e\u308c\u7570\u306a\u3063\u305f\u7d50\u679c\u3092\u51fa\u529b\u3059\u308b\u3068\u3044\u3046\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u306e\u65b9\u6cd5\u306f\u975e\u52b9\u7387\u7684\u3067\u3059\u3002\u30d6\u30e9\u30a6\u30b6\u306f\u30a8\u30e9\u30fc\u3092\u8d77\u3053\u3059\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3057\u3001\u4f55\u3088\u308a\u5168\u3066\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u4fdd\u5b88\u3059\u308b\u306e\u306f\u9aa8\u304c\u6298\u308c\u307e\u3059\u3002", "localization_tags": ["inprogress"], "locale": "ja", "last_edit": "2015-07-18T00:05:32", "review_tags": []}, {"uuid": "e7e88e07-fac5-42f9-b434-2697e3fc7062", "title": "The building blocks of responsive design", "url": "/ru/docs/Web/Apps/Design/UI_layout_basics/responsive_design_building_blocks", "tags": [], "summary": "For Web developers, it is now fairly common to be called upon to create a Web site or app that changes its user interface depending on the browser or device accessing the site to provide an optimized experience. One approach to this is to create different versions of your site/app for different platforms or browsers and serve them appropriately after detecting which browser or platform is looking at your site. But this is increasingly inefficient: browser sniffing is inherently error prone, and maintaining multiple copies of your code can turn out to be a nightmare.", "localization_tags": ["inprogress"], "locale": "ru", "last_edit": "2015-03-05T17:34:57", "review_tags": []}, {"uuid": "488bcea4-53c2-4d3c-8c0b-92eb7b8f7e1a", "title": "\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u5165\u95e8", "url": "/zh-CN/docs/Web/Apps/Design/UI_layout_basics/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1%E5%85%A5%E9%97%A8", "tags": [], "summary": "\u5bf9\u4e8e Web \u5f00\u53d1\u8005\u800c\u8a00\uff0c\u521b\u5efa\u4e00\u4e2a Web \u7ad9\u70b9\u6216\u8005 Web \u5e94\u7528\uff0c\u5b83\u7684\u7528\u6237\u754c\u9762\u80fd\u591f\u9002\u5e94\u8bbf\u95ee\u7ad9\u70b9\u7684\u6d4f\u89c8\u5668\u6216\u8005\u8bbe\u5907\uff0c\u4ece\u800c\u5411\u7528\u6237\u63d0\u4f9b\u6700\u4f73\u4f53\u9a8c\uff0c\u8fd9\u662f\u5982\u4eca\u76f8\u5f53\u666e\u904d\u7684\u8981\u6c42\u3002\u00a0\u4e00\u79cd\u89e3\u51b3\u65b9\u6cd5\u662f\uff0c\u4e3a\u4e0d\u540c\u7684\u5e73\u53f0\u6216\u8005\u6d4f\u89c8\u5668\u521b\u5efa\u4e0d\u540c\u7684\u7f51\u7ad9\u6216\u8005\u5e94\u7528\u7248\u672c\uff0c\u7136\u540e\u901a\u8fc7\u68c0\u6d4b\u8bbf\u95ee\u8bbe\u5907\u5c5e\u4e8e\u54ea\u79cd\u6d4f\u89c8\u5668\u6216\u54ea\u79cd\u5e73\u53f0\uff0c\u5411\u7528\u6237\u63d0\u4f9b\u76f8\u5e94\u7684\u7f51\u7ad9\u6216\u8005\u5e94\u7528\u7248\u672c\u3002\u8fd9\u79cd\u505a\u6cd5\u662f\u975e\u5e38\u4f4e\u6548\u7387\u7684\uff1a\u6d4f\u89c8\u5668\u68c0\u6d4b\u672c\u8eab\u5bb9\u6613\u51fa\u9519\u800c\u4e14\u7ef4\u62a4\u591a\u4efd\u4ee3\u7801\u5c31\u50cf\u662f\u4e00\u573a\u5669\u68a6\u3002", "localization_tags": ["inprogress"], "locale": "zh-CN", "last_edit": "2014-12-17T16:19:21", "review_tags": []}, {"uuid": "daecc3ee-6360-4bc0-b148-0031c272e11b", "title": "The building blocks of responsive design", "url": "/zh-TW/docs/Web/Apps/Design/UI_layout_basics/responsive_design_building_blocks", "tags": [], "summary": "\u73fe\u5728\u7684\u7db2\u9801\u958b\u767c\u8981\u80fd\u91dd\u5c0d\u4e0d\u540c\u88dd\u7f6e\u6216\u700f\u89bd\u5668\u800c\u53ca\u6642\u6539\u8b8a UI (\u4f7f\u7528\u8005\u4ecb\u9762, user interface) \u5df2\u7d93\u662f\u4e00\u4ef6\u5f88\u81ea\u7136\u7684\u5148\u6c7a\u8981\u6c42\u3002\u4e00\u7a2e\u505a\u6cd5\u662f\u56e0\u61c9\u5075\u6e2c\u5230\u7684\u4e0d\u540c\u88dd\u7f6e\u6216\u700f\u89bd\u5668\u63d0\u4f9b\u76f8\u5c0d\u61c9\u8a2d\u8a08\u7684\u7db2\u7ad9 / App\uff0c\u4e0d\u904e\u9019\u662f\u4e00\u7a2e\u8d8a\u4f86\u8d8a\u7121\u6548\u7387\u7684\u4f5c\u6cd5: \u700f\u89bd\u5668\u5075\u6e2c\u5f88\u5bb9\u6613\u51fa\u932f\uff0c\u800c\u4e14\u7dad\u8b77\u591a\u7a2e\u7248\u672c\u5c07\u6703\u662f\u4e00\u5834\u60e1\u5922\u3002", "localization_tags": ["inprogress"], "locale": "zh-TW", "last_edit": "2015-01-13T01:35:39", "review_tags": []}], "modified": "2016-03-08T02:06:37", "label": "The building blocks of responsive design", "localization_tags": [], "locale": "en-US", "id": 80545, "last_edit": "2016-03-08T02:06:28", "summary": "For Web developers, it is now fairly common to be called upon to create a Web site or app that changes its user interface depending on the browser or device accessing the site to provide an optimized experience. One approach to this is to create different versions of your site/app for different platforms or browsers and serve them appropriately after detecting which browser or platform is looking at your site. But this is increasingly inefficient: browser sniffing is inherently error prone, and maintaining multiple copies of your code can turn out to be a nightmare.", "sections": [{"id": "Fluid_grids", "title": "Fluid grids"}, {"id": "border-box_sizing", "title": "border-box sizing"}, {"id": "Flexible_replaced_elements", "title": "Flexible replaced elements"}, {"id": "Media_queries", "title": "Media queries"}, {"id": "Typical_desktop_layout", "title": "Typical desktop layout"}, {"id": "Mid-width_layout", "title": "Mid-width layout"}, {"id": "Narrow_screenmobile_layout", "title": "Narrow screen/mobile layout"}, {"id": "Really_wide_screens", "title": "Really wide screens"}, {"id": "Orientation_fail", "title": "Orientation fail"}, {"id": "Viewport", "title": "Viewport"}, {"id": "Responsive_imagesvideo", "title": "Responsive images/video"}, {"id": "CSS_background_images", "title": "CSS background images"}, {"id": "<video>", "title": "<video>"}, {"id": "<img>", "title": "<img>"}, {"id": "SVG_and_other_vector_graphics", "title": "SVG and other vector graphics"}, {"id": "See_also", "title": "See also"}], "slug": "Web/Apps/Progressive/Responsive/responsive_design_building_blocks", "review_tags": []}