/媒体查询，参考部分Bootstrap框架//当页面大于1200px时，大屏幕，主要是PC端/@media(min-width:1200px){}/在992和1199像素之间的屏幕里，中等屏幕，分辨率低的PC/@media(min-width:992px)and(max-width:1199px){}/在768和991像素之间的屏幕里，小屏幕，主要是PAD/@media(min-width:768
分类：
其他好文 时间：
2018-05-11 17:18:50
阅读次数：
160
1.1上次课内容回顾：BootStrap：*响应式的HTML,CSS,JS的框架.*响应式设计：*设计一套页面,适配不同的设备,在手机,PAD,PC端都能够正常浏览.*响应式原理：*使用CSS3的媒体查询,根据屏幕的分辨率匹配不用的样式.*BootStrap:*全局CSS：*栅格：*表单:*按钮...*组件:*导航条：*分页栏:*标签页:*JS的插件：*图片轮播.1.2MYSQL的回顾：1.2.1
分类：
编程语言 时间：
2018-05-11 15:38:42
阅读次数：
183
弹性盒子定义弹性盒子 display：flex定义子元素排列方式 flex-diection定义子元素换行方式 flxe-wrap定义子元素对齐方式横向对齐 justify-content纵向对齐 align-items 媒体查询 @media screen and (max-width:最大宽度) ...
分类：
其他好文 时间：
2018-05-07 19:39:57
阅读次数：
165
八、媒体查询（响应式布局） 1、为什么会有媒体查询？ 移动设备的快速普及完全颠覆了Web设计领域。用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设 ...
分类：
Web程序 时间：
2018-05-04 14:19:01
阅读次数：
292
自适应布局：不同终端上显示的文字，图片，等位置排版都是一样的，只是大小不同。 响应式布局：通过媒体查询监听屏幕大小的变化，做出响应式的改变，在不同设备可能展现不同的样式效果。 em:是相对其父元素的。 rem:相对于页面根元素，推荐使用rem。 ...
分类：
其他好文 时间：
2018-04-28 19:29:01
阅读次数：
136
移动端布局痛点在：兼容各个分辨率的移动设备，同样是手机，iPhone4-iPhoneX分辨率范围就已经很广；如果使用px进行布局，显然会出现问题； 常见的像素单位px,em,rem中，em是相对于父元素font-size的单位，个人认为在使用中，em会比较混乱；rem相对的是根元素、HTML，便于根 ...
分类：
移动开发 时间：
2018-04-26 14:53:32
阅读次数：
227
Day32 bootstrap Bootstrap就是响应式布局最成功的实现，为了兼容不同的浏览器采用jQuery，为了适配不同的终端采用CSS3 Media Query （媒体查询） 1.1.1 栅格系统 l 帮助手册：全部CSS样式/栅格系统，http://v3.bootcss.com/css/ ...
分类：
Web程序 时间：
2018-04-25 17:10:43
阅读次数：
286
该媒体查询适配规则是以UI设计图750p宽度为版本的，比如PS量的是450px，在书写时写 (450rem/2/15). ...
分类：
移动开发 时间：
2018-04-20 23:48:50
阅读次数：
422
Css规范 OOCSS(Object Oriented CSS)面向对象的css 主要分成四个部分 ：模板 ：栅格布局 ：组件 ：内容 Template模板 主要负责 ，让 更有层次感。 可以按 来构建HTML的结构 常见的如： 人体架构 垂直方向 水平方向 事物的结构构造（房子）由外向内 结构整么 ...
分类：
Web程序 时间：
2018-04-18 19:08:15
阅读次数：
276
Bootstrap框架中，字体不会自适应，及时使用rem都不行，那么就只有使用媒体查询来做。这样可能会有点麻烦，但是这是我目前找到的一个方法直接上代码了 ...
分类：
其他好文 时间：
2018-04-13 11:26:49
阅读次数：
242
