发表于： 2019-05-29 23:31:59
1 857
今天完成的事情
响应式布局：
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。·
//code from http://caibaojian.com/356.html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">2.通过媒体查询来设置样式media query
media query 是响应式设计的核心，它能够和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么可以这样写
@media screen and (max-width:980px){ #head { … } #content { … } #footer { … }
}这里面的样式会覆盖掉之前所定义的样式。3.设置多种视图宽度
假如我们要兼容ipad和iphone视图，我们可以这样设置：
/**ipad**/@media only screen and (min-width:768px)and(max-width:1024px){}/**iphone**/
@media only screen and (width:320px)and (width:768px){}4. 设置多种试图宽度
假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：·
//code from http://caibaojian.com/356.html
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}响应式布局大概就为这些
流式布局、浮动布局、flex布局、定位布局：这些应该是平常写页面常用的布局方式。使用这些布局之后在加上响应式布局，应该就可以实现不同设备显示页面效果。
明天的计划
继续了解响应式布局，把响应式布局套入自己的flex布局中。
遇到的困难
今天完成的事情中的思路是否正确呢。
感觉目前自己的flex布局有很大缺陷（没有使用flex项目属性）
收获
感觉没啥收获，都是理论知识
返回列表
评论