Dise\u00f1o para la mejor experiencia para todos los usuarios<\/h2>\n\n\n\n
Las p\u00e1ginas web se pueden ver usando muchos dispositivos diferentes: computadoras de escritorio, tabletas y tel\u00e9fonos. Tu p\u00e1gina web debe verse bien y ser f\u00e1cil de usar, independientemente del dispositivo.<\/p>\n\n\n\n
Las p\u00e1ginas web no deben dejar de lado informaci\u00f3n para adaptarse a dispositivos m\u00e1s peque\u00f1os, sino adaptar su contenido para adaptarse a cualquier dispositivo:<\/p>\n\n\n\n Se llama dise\u00f1o web Responsive<\/strong> cuando usas CSS<\/strong> y HTML<\/strong> para cambiar el tama\u00f1o, ocultar, reducir, ampliar o mover el contenido para que se vea bien en cualquier pantalla. No te preocupes si no entiendes el ejemplo a continuaci\u00f3n, desglosaremos el c\u00f3digo, paso a paso, en los pr\u00f3ximos cap\u00edtulos:<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Este es un ejm completo de una p\u00e1gina web Responsive<\/p>\n\n\n\n Que es un dise\u00f1o Responsive? El dise\u00f1o web Responsive hace que su p\u00e1gina web se vea bien en todos los […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1464,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1467","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Que es un dise\u00f1o Responsive? El dise\u00f1o web Responsive hace que su p\u00e1gina web se vea bien en todos los […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1467"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1467\/revisions"}],"predecessor-version":[{"id":1471,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1467\/revisions\/1471"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1464"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/08\/CSS-Responsive.png\")
<\/figure>\n\n\n\n<!DOCTYPE html>
<html>
<head>
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>
<style>
* {
box-sizing: border-box;
}
.row::after {
content: \"\";
clear: both;
display: table;
}
[class*=\"col-\"] {
float: left;
padding: 15px;
}
html {
font-family: \"Lucida Sans\", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
\/* For mobile phones: *\/
[class*=\"col-\"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
\/* For tablets: *\/
.col-s-1 {
width: 8.33%;
}
.col-s-2 {
width: 16.66%;
}
.col-s-3 {
width: 25%;
}
.col-s-4 {
width: 33.33%;
}
.col-s-5 {
width: 41.66%;
}
.col-s-6 {
width: 50%;
}
.col-s-7 {
width: 58.33%;
}
.col-s-8 {
width: 66.66%;
}
.col-s-9 {
width: 75%;
}
.col-s-10 {
width: 83.33%;
}
.col-s-11 {
width: 91.66%;
}
.col-s-12 {
width: 100%;
}
}
@media only screen and (min-width: 768px) {
\/* For desktop: *\/
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}
<\/style>
<\/head>
<body>
<div class=\"header\">
<h1>Chania<\/h1>
<\/div>
<div class=\"row\">
<div class=\"col-3 col-s-3 menu\">
<ul>
<li>The Flight<\/li>
<li>The City<\/li>
<li>The Island<\/li>
<li>The Food<\/li>
<\/ul>
<\/div>
<div class=\"col-6 col-s-9\">
<h1>The City<\/h1>
<p>
Chania is the capital of the Chania region on the island of Crete. The
city can be divided in two parts, the old town and the modern city.
<\/p>
<\/div>
<div class=\"col-3 col-s-12\">
<div class=\"aside\">
<h2>What?<\/h2>
<p>Chania is a city on the island of Crete.<\/p>
<h2>Where?<\/h2>
<p>Crete is a Greek island in the Mediterranean Sea.<\/p>
<h2>How?<\/h2>
<p>You can reach Chania airport from all over Europe.<\/p>
<\/div>
<\/div>
<\/div>
<div class=\"footer\">
<p>
Resize the browser window to see how the content respond to the
resizing.
<\/p>
<\/div>
<\/body>
<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"