diseño frontal
1. Adaptativo
La autoadaptación es un conjunto de códigos. No importa cómo cambie el tamaño de la pantalla, solo cambia el tamaño de los elementos en la página. No habrá cambios de tres columnas a dos columnas en la tabla. Responde y estoy tan molesto que cada vez que el líder y el diseñador venían a dejarme, modificaba una página y decía que era un cambio en la ventana adaptable. El resultado requería que tres columnas se cambiaran a dos columnas. ¿Por qué ocultar este botón y ese botón y cambiarlo? ?Como cambiarlo?No es necesario diseñar un cuadro subir...
Sitio web receptivo: m.ctrip.com/html5/
método:
- Usar diseño flexible
- porcentaje de uso
- Evite escribir ancho y alto muertos
- añadir barra de desplazamiento
- uso rem
- ...
2. receptivo
Es un conjunto de códigos para teléfonos móviles, pads y pcs. Cada vez que se carga un estilo diferente, todos son compatibles en un proyecto. Esto se llama receptivo. Espero que todos los que hacen productos puedan mantener los ojos abiertos. No quiero hacer un trabajo de diseño y finalmente decir que no se ve bien. No hago tonterías de diseño.
Sitio web receptivo: www.microsoft.com/zh-cn/
3. El ancho y alto común del terminal móvil
| Ancho Altura | Proporción |
|---|---|
| 320×480 | (2:3) |
| 480×854 | (Juan 9:16) |
| 480×800 | (3:5) |
| 480×640 | (3:4) |
| 540×960 | (9:16) |
| 600×1200 | (1:2) |
| 600×1024 | (75:128 sobre 9:16) |
| 640×960 | (2:3) |
| 640×1136 | (40:71 sobre 9:16) |
| 720×1280 | (9:16) |
| 768×1024 | (3:4) |
| 800×480 | (5:3) |
| 800×1280 | (5:8) |
| 1080×1920 | (9:16) |
| 1536×2048 | (4:3) |
| 1600×2560 | (5:8) |
Relaciones de aspecto comunes para pantallas verticales: 1:2, 2:3, 3:4, 3:5, 5:8, 9:16
Relaciones de aspecto comunes para pantallas apaisadas: 4:3, 5:3
Adjunto: Lista de tamaños y resoluciones de pantalla de teléfonos inteligentes
| Dimensiones (pulgadas) | resolución | densidad de pixeles |
|---|---|---|
| 3.5 (Apple iphone4) | 960 × 640 (DVGA) | 326ppi |
| 3.7 | 800 × 480 (WVGA) | 252ppi |
| 3.7 | 800 × 480 (WVGA) | 252ppi |
| 3.7 | 960 × 540 (qHD) | 298ppi |
| 4.0 | 800 × 480 (WVGA) | 233ppi |
| 4.0 | 854 × 480 (WVGA) | 245PPI |
| 4.0 | 960 × 540 (qHD) | 275ppi |
| 4.0 (Apple iphone5) | 1136 × 640 (HD) | 330 ppp |
| 4.2 | 960 × 540 (qHD) | 262ppi |
| 4.3 | 800 × 480 (WVGA) | 217ppi |
| 4.3 | 960×640(qHD) | 268PPI |
| 4.3 | 960×540(qHD) | 256PPI |
| 4.3 | 1280×720(HD) | 342PPI |
| 4.5 | 960×540(qHD) | 245PPI |
| 4.5 | 1280×720(HD) | 326PPI |
| 4.5 | 1920×1080(FHD) | 490PPI |
| 4.7 | 1280×720(HD) | 312PPI |
| 4.7 | 1280×720(HD) | 312PPI |
| 4.7 | 1280×720(HD) | 312PPI |
| 4.8 | 1280×720(HD) | 306PPI |
| 5.0 | 480×800(WVGA) | 186PPI |
| 5.0 | 1024×768(XGA) | 256PPI |
| 5.0 | 1280×720 | 294PPI |
| 5.0 | 1920×1080(FHD) | 441PPI |
| 5.3 | 1280×800(WXGA) | 285PPI |
| 5.3 | 960×540(qHD) | 207PPI |
| 6.0 | 854×480 | 163PPI |
| 6.0 | 1280×720 | 245PPI |
| 6.0 | 2560×1600 | 498ppi |
| 7.0 | 800×480(WVGA) | 128PPI |
| 7.0 | 1024×600 | 169PPI |
| 7.0 | 1280×800 | 216PPI |
| 9.7 | 1024×768(XGA) | 132ppi |
| 9.7 | 2048×1536 | 264PPI |
| 10 | 1200X600 | 170ppi |
| 10 | 2560×1600 | 299ppi |
1.百分比布局
窗口的hight和width改变的时候，通过给 height、width 、padding、border、margin等 属性都是依托父组件的宽高（margin 和 padding 都可以使用百分比值的形式，但有一点可能和通常的想法不同，就是 margin-top、margin-bottom、padding-top、padding-bottom的百分比值参照的不是容器的高度，而是父级容器的宽度）
-
子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素的高度，同样，子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位（默认定位的）父元素的宽度。
-
子元素的 padding 和 margin 如果设置百分比，不论是垂直方向或者是水平方向都相对于直接父亲元素的 width，而与父元素的 height 无关。border-radius 为百分比，则是相对于自身的宽度
缺点：
计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位
2、媒体查询布局
通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。
响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。
语法: @media mediatype and not only (media feature) { css-code; }
js
//也可以针对不同的媒体使用不同的stylesheets:
<link rel="stylesheet" media="mediatype and not only (media feature)" href"mystylesheet.css">
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">
<!--上面将浏览器宽度小于等于80px时，应用 styleA 。-->
css引用
@media screen and (max-device-width:960px){
body{background:red;}
}
参考文档：blog.csdn.net/caseywei/ar…
常用的响应断点阈值设定
| 括号后面是样式的缩写 |
|---|
| <576px （Extra small） |
| >=576px （Small --- sm） |
| >=769px （Medium --- md） |
| >=992px （Large --- lg） |
| >=1200px （X-Large --- xl） |
| >=1400px （XX-Large ---- xxl） |
@media 会结合删格系统一起来使用，实现真正意义上的响应式开发。
3.rem 响应式布局
rem通常用来适配移动端，按照视口将页面分成10份。
比如现在有 5 个同尺寸的屏幕 （750 640 480 375 320），所有屏幕整体宽分成 10rem 那我们就需要分别得到这几种不同屏幕下对应的 html 根元素的 font-size 大小了。
| 屏幕尺寸 | html中font-size 大小(1rem 大小) |
|---|---|
| 750px | 75px |
| 640px | 64px |
| 480px | 48px |
| 375px | 37.5px |
| 320px | 32px |
flexible.js 插件也可以解决
em y rem son similares, ambos escalan el diseño de la página según el tamaño de la fuente, pero em depende principalmente del tamaño de la fuente del padre directo, y solo encontrará el padre más cercano, no depende directamente del html general etiqueta raíz
3. diseño de respuesta vw, vh
Debido a que 100vw = 100 ancho de la ventana de visualización, 100vh = 100 altura de la ventana de visualización, entonces de acuerdo con el borrador de diseño de 750, 100vw es 750. Entonces 1vw es 7.5px
| tamaño de pantalla | 1vw |
|---|---|
| 750px | 7.5px |
| 640px | 6.4px |
| 480px | 4.8px |
4. Diseño elástico flexible.
dirección flexible, envoltura flexible, justificar contenido, elementos alineados, contenido alineado
4. Diseño del Santo Grial y diseño de doble ala voladora
Disposición de doble ala
El ancho de las columnas izquierda y derecha es constante, y el ancho de la columna del medio se adapta según el tamaño de la ventana del navegador.
diseño del santo grial
Al igual que el diseño de ala voladora doble, el ancho de las columnas izquierda y derecha es constante, y el ancho de la columna central se adapta según el tamaño de la ventana del navegador, pero es más completo.