发表于: 2016-11-22 19:01:16

3 822


今天完成的事情:

1、编写九宫格页面,基本完成 task1,可以访问页面,如图:

2、继续学习 html 基础知识

3、学习了盒子模型,了解 Margin 属性

4、了解了一些 viewport 相关知识

明天计划的事情:

1、完善九宫格页面,有可能进行 task2

2、继续学习 html、css 基础知识

3、使用WebStorm上传代码到github

遇到的问题:

使用 viewport 属性后,在手机端访问九宫格页面时出现问题,显示成一竖排,然后就搜索了一下 viewport 方面的相关知识。起初每个格都是设置具体的 height 和 width 值,改成外层包裹一层具体宽高的 <div>,每个小格尺寸使用 % 尺寸。

九宫格还未居中显示,基础知识还没看到居中显示,后面会改进居中显示。

收获:

了解了一些 viewport 知识,viewport 起源于苹果,现在已被大多数浏览器支持,默认情况下,手机浏览器会像在大屏幕的桌面浏览器那样显示你的页面,宽度达到了980 px,然后缩小内容以适应手机的小屏幕,用户在手机看这个页面时感觉字体就比较小,也比较模糊,必须放大才能看清;定义 viewport meta 标签,他的作用是创建一个虚拟的窗口,通知浏览器使用设备的宽度作为可视区的宽度。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum=1.0, user-scalable=no">

其中: width-viewport 的宽度 height-viewport 的高度

initial-scale:初始的缩放比例

minimum-scale:允许用户缩放到的最小比例

maximum-scale:允许用户缩放到的最大比例

user-scalable:用户是否可以手动缩放



返回列表 返回列表
评论

    分享到