响应式
文章平均质量分 69
Dear_Mr
尽自己的努力,做好该做的事情
展开
-
响应式的实例
响应式的实例两个在线展示响应式的链接:https://vamouszj.github.io/ResponsiveWeb/https://vamouszj.github.io/responseTimeLine/相应的知识点的总结:响应式图片gulp入门CSS Sprite高度塌陷关于li之间存在空白字符的问题CSS的px,em,rem响应式网站原创 2017-05-15 16:43:18 · 505 阅读 · 0 评论 -
响应式网站
一、响应式网站概念响应式网站是一个设计理念,它是多项技术的综合体flexible grid layout 弹性网格布局flexible image 弹性图片media queries 媒体查询二、响应式网站的优点与缺点优点(1)减少工作量网站、设计、代码、内容都只需要一份多出来的工作量只是JS、CSS样式的修改(2)节省时间(3)每个设备都能得到正确的设计(4)搜索优化缺点(1)会加载原创 2017-05-06 16:27:46 · 1989 阅读 · 0 评论 -
CSS的px,em,rem
一、px,em,rem是什么?px:像素,它是长度的相对单位,它是相对于与屏幕的分辨率而言的em:是相对长度单位,相对参照物为父元素的font-size,em具有继承的特点,当没有设置font-size时,则会继承浏览器的默认设置1em = 16pxrem: 相对参照物是根元素html,且是不变的,由于参照物的不变,所以比较好计算,当没有设置font-size时,浏览器会采用默认的16px原创 2017-05-06 17:18:43 · 564 阅读 · 0 评论 -
关于li之间存在空白字符的问题
关于li之间存在空白字符的问题出现的问题如下图所示,可以很容易的看出来,就是在相邻的li之间是存在空的字符的 一、出现该问题的原因当我们使用JS的children和childNodes这个属性的时候,是否发现了她们在FF浏览器下的结果并不相同,那么原因是什么呢?就是对于文本节点的处理的不同,上面的图也就很容易解释了9这个结果那么对于就今天的问题,li之间出现距离的原因,就是因为空白字符的出现,也就原创 2017-05-07 19:57:11 · 2193 阅读 · 0 评论 -
CSS Sprite
CSS SpriteCSS Sprite也被称为CSS雪碧图,就是把网页上的一些背景图片整合到一张图片上,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位优点:将图片拼接起来可以减少请求次数,提高网页的性能,合并后的图片相对于原图片的字节数较小缺点:在合并图片的时候,需要合理的合并并且留好足够的空原创 2017-05-07 21:25:47 · 1232 阅读 · 0 评论 -
高度塌陷
高度塌陷高度塌陷一什么是高度塌陷二解决办法父元素结束之前添加一个标签父元素设置overflow auto或者浮动元素设置overflow hidden让父元素本身也浮动使用CSS的after伪元素三BFCBlock formating context一、什么是高度塌陷?简单来说,就是包含含有浮动的元素的上一级的高度变为0了,下面的元素会上去<!DOCTYPE html><html>原创 2017-05-07 13:54:41 · 4739 阅读 · 0 评论 -
响应式图片
响应式图片响应式图片通过js或者服务器srcsetsrcset配合sizespicture元素svg加载与用户设备相匹配的图片,既快速,又不会影响用户的体验关于响应式图片有以下几种方式:1. 通过js或者服务器通过js代码来确定视口的宽度,然后根据结果加载不同大小的图片$(document).ready(function() { function makeImageResponsiv原创 2017-05-08 14:37:15 · 595 阅读 · 0 评论