Un diseño de la respuesta
1. ¿Qué es la web de respuesta
2. página web receptivo debe hacer algunas cosas
| 1. diseño, el flujo de diseño (+ flotando corriente de defecto de los documentos) + diseño flexible diseño de cuadrícula + 2. El texto y tamaño de la imagen como el cambio de tamaño del contenedor 3. Consultas de los medios tecnologías (CSS3) Código complejidad de la geometría de aumento diseño de página complejo no es adecuada respuesta |
3. Modo de comprobar la página web de respuesta
① utilizando equipos reales
| Beneficios: auténticas Desventajas: alto costo, una gran cantidad de tareas de prueba |
② utilizar las pruebas de software de simulación de terceros
| Ventajas: fácil y rápido Desventajas: resultados de las pruebas limitadas, en espera de su posterior verificación |
③ El simulador de prueba viene cromo
| Beneficios: Fácil Desventajas: resultados de las pruebas son bastante limitadas |
4. Preparación diseño sensible (enfoque *******************************************************)
① adaptador de teléfono
| Visor se proporciona, si el proyecto se ejecute en el terminal móvil, para ajustar el área de visualización <Meta name = "viewport" content = "width = dispositivo de anchura, inicial escala = 1,0, de máxima escala = 1,0, usuario escalable = 0" > dispositivo de ajuste de anchura = dispositivo de ancho de anchura igual a la anchura de la ventana gráfica inicial escala = 1,0, siempre que la anchura inicial de la ventana gráfica no se puede escalar 1.0 representantes -Máximo de la escala = 1,0, el ajuste de la escala de la ventana 1.0 veces el máximo 1 máximo user-escalable = 0 permite al usuario establecer si el zoom ventana gráfica mascotas 0 Visor más sucinta redacción <Meta name = "viewport" content = "width = dispositivo de anchura, inicial escala = 1" > |
② todo el contenido / texto / imagen utilizar el tamaño relativo (como sea posible), el valor absoluto de poco uso
diseño flexible de fluido + + ③ diseño preguntas de los medios (diseño de cuadrícula) de respuesta de finalización diseño
④ preguntas de los medios
| CSS3 sensible consulta de medios hacer la tecnología necesaria Medios: medios de comunicación, dispositivo de navegación web Equipo: pantalla (pc / pad / teléfono) TV / imprimir Dependiendo de su equipo de las páginas del navegador (tamaño, orientación, hardware, resolución, etc.), tienen una opción, realizado como parte de los estilos CSS, ignorar otros estilos css |
二 .BootStrap
| 1. Aplicación de la bota 2. css Global 3.组件+js插件 4.定制sass 5.boot项目 |
1.如何使用boot
| <link rel="stylesheet" href="bootstrap.css"/> |
2.全局css样式
| container 定宽容器，每种不同的分辨率下， 定义了写死的max-width 同时，有左右15px内边距，水平居中 container-fluid 变宽容器，根据不同分辨率的屏幕， 宽度永远是屏幕的100% boot支持4种屏幕 xl/lg/md/sm 不支持xs boot中1个rem是16px。 boot的css reset使用的是normalize.css方案 |
①按钮相关的class
| .btn 基本类 定义了行内块，字号，文本对齐，边框，过渡等 按钮颜色 .btn-danger 红色 .btn-success 绿色 .btn-warning 黄色 .btn-info 藏青 .btn-primary 蓝色 .btn-secondary 灰色 .btn-dark 深色 .btn-light 浅色 不同边框的按钮 . btn-outline-danger/warning/info...... 不同按钮大小 .btn-sm .btn-lg .btn-block . btn-link |
②图片相关
| .rounded 添加圆角 0.25rem .rounded-circle 圆形 .img-thumbnail 添加内边距和边框 .img-fluid 响应式图片，图片可以缩放， 但是最大不能超过原始大小 |
③文字相关的class
| .text-danger/warning/info.....文本颜色 .h1~.h6 文本字号和加粗 .text-uppercase/lowercase/capitalize 文本大小写，首字母大写 .text-left/right/center 文本对齐 .text-*-left/right/center *:sm/md/lg 媒体查询 .text-justify 两端对齐，注意，没有媒体查询 |
④列表相关
| ul .list-unstyled 去点，左内边距清0 .list-group 列表组 li .list-group-item 列表项 ，边框，首元素和尾元素的圆角 颜色 .list-group-item-danger/warning..... 激活项 .active 禁用项 .disabled |
⑤table相关的class
| .table 对table本身和table的后代布局 .table-bordered 为table本身和后代添加边框 .table-danger/warning/success...表格颜色 .table-hover 带悬停效果的表格 .table-striped 隔行变色 .table-responsive-* *：sm/md/lg/xl 响应式布局的表格，写在table的父元素上 |
3.辅助类
①边框
| .border-0 去掉边框 .border-top/right/bottom/left-0 去掉某一个方向的边框 基本类 .border 灰色实线边框 .border-top/right/bottom/left 单边的灰色实线边框 边框颜色 .border-danger/warning/success..... |
②浮动
| .float-left/right/none 响应式浮动 .float-*-left/right/none *:sm/md/lg/xl .clearfix 解决高度坍塌，写在父元素上 |
③显示
| .visible visibility:visible .invisible visibility:hidden; |
④背景颜色
| .bg-danger/warning/success.... |
⑤圆角
| .rounded/.rounded-0 .rounded-top/right/bottom/left 设置某个方向的两个圆角 |
⑥尺寸
| w-25/50/75/100 width:25%/50%/75/100% 其它宽度需要自己定义 h-25/50/75/100 同上 mw-100/mh-100 max-width:100%;max-height:100%; |
⑦内外边距
| m/mt/mr/mb/ml/mx/my-*-auto/0/1/2/3/4/5 外边距 0:0 1:0.25rem 2:0.5rem 3:1rem 4:1.5rem 5:3rem p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 内边距 *：sm/md/lg/xl 响应式的内外边距 |