发表于： 2018-12-14 21:21:31
1 794
今天完成的事：
响应式优缺点
优点
1.响应式设计可以向用户提供友好的Web界面，同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这也是基本的也是响应式实现的初衷。
2.响应式在开发维护和运营上，相对多个版本成本会降低很多。也无须花大量的时间在网站的维护上
3.方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。
缺点
1.为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码,这导致了文件增大，影响了页面加载速度。
2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；
3.局限性，响应式不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，对设计样式不好控制，代码过多会影响运行速度。
如何实现响应式?
1.流式布局
用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位.
这些相对长度多用于网格，诸如宽度，间距或是留白等属性。
为了更好的控制流式布局，可以使用最小宽度（min-width），最大宽度（max-width），最小高度（min-height）和最大高度（max-height），把他们应用到容器元素(container)上。
vw:视窗宽度;vh:视窗高度;vmin:视窗最小尺寸;vmax:视窗最大尺寸;
2.媒体查询 MediaQuery
自动探测屏幕宽度，然后加载相应的CSS样式,为目标设备提供有针对性的样式，在响应式设计中发挥作用。
@media all and (min-width: 800px) and (max-width: 1024px) {...}
在搭建响应式网站时，应该可以适应各种不同视窗尺寸，而不需要考虑设备的分辨率。设置断点只是在网站布局被破坏，看起来很怪或是内容无法显示的时候才需要设置。
3.viewport
meta name="viewport" content="width=device-width, initial-scale=1.0"
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
4.流式媒体
当视窗开始改变尺寸时，媒体大小并不总是做适当改变的。所以图片，视频以及其他媒体类型需要在视窗改变的情况下，按照比例改变大小。
通过使用最大宽度值为100%，是一个快速实现媒体按照比例缩放的方法。这样做可以确保在视窗变小的情况下，任何媒体可以根据他的容器宽度，按照比例缩放。
img, video, canvas{max-width: 100%;}
明天准备的事情：
继续任务
遇到的困难：
修改radio样式，用的input加before和after，但是checked过后after无法垂直居中，开始用的绝对定位但是分辨率不同位置也不同。
收获：
如上
返回列表
评论