发表于： 2018-11-11 20:09:58
1 798
今天完成的事情：
今天对页面一进行了调试，然后做了响应式
学习了响应式的相关知识和概念，学习使用媒体查询
响应式布局概念：
意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
响应式布局的步奏：
1. 设置 Meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
以上视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 ）
2.正常编辑你的css样式
3. 通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
这里的样式就会覆盖上面已经定义好的样式。
4. 设置多种试图宽度
假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：·
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
需要注意的问题
1. 宽度需要使用百分比
2. 处理图片缩放的方法
- 简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
img { width: auto; max-width: 100%; }
3. 其他属性
例如 pre ，iframe，video 等，都需要和img一样控制好宽度。对于table，建议不要增加 padding 属性，低分辨率下使用内容居中：·
table th, table td { padding: 0 0; text-align: center; }
明天计划的事情：
完成页面二和页面三的布局，继续学习响应式布局
遇到的问题：
暂无
收获：
学习了响应式布局，并在任务中得到了实践
返回列表
评论