1、flex属性 flex-grow:;数字不带单位,定义项目剩余的宽度进行扩张(放大) flex-shrink:;数字不带单位,项目总宽度超出容器时的缩小设置 0 本身的大小,不缩小也不放大 1 平均分配,默认值 flex-basis: 0%;项目的长度 综合写法: felx:放大 缩小 长度; ...
分类：
Web程序 时间：
2020-03-24 23:38:40
阅读次数：
139
响应式开发原理 利用媒体查询对不同宽度的设备进行布局和样式的设置，从而适配不同的设备 设备划分 尺寸区间 超小屏幕（手机） <768px 小屏设备（平板） >=768px~992px 中等屏幕（桌面显示器） >=992px~<1200px 宽屏设备（大桌面显示器） >=1200px 响应式布局容器 ...
分类：
编程语言 时间：
2020-03-15 09:42:29
阅读次数：
127
计算方法 计算rem方法： 结合媒体查询 -> 随着设备的改变 更改html font-size的值。 ? 媒体查询确定范围？？ ? 移动端设计图 ： 640px 750px 1080px; dpr 2 2 3 范围 320px 375px @media screen and (max-width: ...
分类：
其他好文 时间：
2020-03-11 01:07:15
阅读次数：
253
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特 ...
分类：
其他好文 时间：
2020-03-08 15:56:57
阅读次数：
124
动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq ...
分类：
其他好文 时间：
2020-03-08 14:03:02
阅读次数：
46
媒体查询，语法如下，示例：当屏幕大于600小于900时样式生效： @media screen and (min-width:600px) and (max-width:900px) { body { background-color: red; } } 文本和字体： @font-face{ font ...
分类：
其他好文 时间：
2020-03-07 00:04:46
阅读次数：
64
页面自适应，是指页面内容自动适应屏幕大小。实现自适应的方法有多种：1、简易场景实现自适应：浮动、页面居中、设置百分比属性、自动匹配大小。这样在页面宽度发生变化时，能利用以上特性实现简易的自适应效果。2、如果实际开发中有复杂场景的需求，一般通过编写多套CSS代码，然后用媒体查询技术，让页面根据不同屏幕 ...
分类：
其他好文 时间：
2020-03-06 17:15:50
阅读次数：
66
一、响应式布局： 在小型网站建设中，有运用一套代码代码来适应不同终端分辨率的需求，优点：节约制作时间、节约制作成本、便于维护等优点。 CSS3利用媒体查询（media queries）即可针对不同的媒体类型定义不同的样式，从而实现响应式布局 。也可以针对不同的分辨率设置不同的样式。 1024分辨率以 ...
分类：
Web程序 时间：
2020-03-01 12:47:01
阅读次数：
96
响应式网站概念 弹性网格布局 弹性图片 媒体查询 响应式网站优点 减少工作量 节省时间 网站代码只需要一份 多出来的只是js脚本和css样式 每个设备都能得到正确的设计 搜索优化 响应式网站缺点 加在更多的样式和脚本 设计比较难精准的定位和控制 老版本浏览器兼容性不好 需要掌握技术 浏览器兼容 IE ...
分类：
Web程序 时间：
2020-02-27 19:02:58
阅读次数：
89
实际开发搞搞起来！！！！ rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步，我们需要拿到设计稿，安装设计稿的要求来设置一个合适的html字体大小。 第二步，计算元素大小的取值 页面rem = 页面元素值（设计稿） / (屏幕的宽度/划分的份数) (屏幕的宽度/划分的份数) = htm ...
分类：
移动开发 时间：
2020-02-26 17:12:49
阅读次数：
84
