页面布局的一点点思考

关于页面布局的一点点思考


	position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

position: inherit;

具体详情点击mdn——position


嗯,不谈定位的问题。。只说说对于一个设计稿,用absolute定位,分别设top-left,top-right,bottom-left,bottom-right对应的用户体验.效果图如下

页面布局的一点点思考 第1张

为了兼容性我们用百分比来定位。

  1. 最常见的布局设置top,left这对属性

    效果点击这里

    看起来没什么问题。。。。下面我们改变浏览器窗口大小。。效果如下

    页面布局的一点点思考 第2张

  2. 设置top,right这对属性

    效果点击这里

    看起来没什么问题。。。。下面我们改变浏览器窗口大小。。效果如下

    页面布局的一点点思考 第3张

  3. 设置bottom,left这对属性

    效果点击这里

    看起来没什么问题。。。。下面我们改变浏览器窗口大小。。效果如下

    页面布局的一点点思考 第4张

  4. 设置bottom,right这对属性

    效果点击这里

    看起来没什么问题。。。。下面我们改变浏览器窗口大小。。效果如下

    页面布局的一点点思考 第5张

体验总结:

  1. 设置left-top,当窗口改变的时候,会出现横向纵向滚动条,并且必须滚动横向滚动条才能看见登录界面

  2. 设置right-top,当窗口改变会出现纵向滚动条,偶尔需要滚动纵向滚动条才能看见登录界面

  3. 设置bottom-left,当窗口改变的时候,会出现横向滚动条,并且当调出开发者工具的时候,登陆界面部分内容不可见。。

  4. 设置bottom-right,当调出开发者工具的时候,登陆界面部分内容不可见。。

结语:

克军大大的还原"活"的设计前端工程师,不能只是单纯的量量像素,0px偏差实现设计师的设计稿。。要充分理解设计师的意图,以及自己的理解,实现一个活的设计。用最简洁的代码和结构,达到一个最优解。一个简单的登录框界面,四个属性,不同的实现。。体验完全不一样。。每次拿到设计稿。。都要仔细琢磨设计师的设计意图。。和设计师沟通。。协调。这样才是一个合格的前端工程师。

本文标题:页面布局的一点点思考
本文链接:https://56way.com/p/58.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。