布局
文章平均质量分 83
micoria
这个作者很懒,什么都没留下…
展开
-
移动端常见布局总结(三)——rem布局
1. rem基础思考一下问题,有便于下面学习rem布局。页面布局文字能否岁屏幕的大小变化而变化?流式布局和flex布局主要针对于宽度布局,那高度如何设置?(之前都是写死的高度)怎样让屏幕发生变化的时候元素高度和宽度等比例缩放?(rem)1.1 rem 和 em 单位rem(root em)单位,是一个相对单位,是相对于根元素(HTML)的字体大小。em单位, 也是一个相对单位,相对于父元素字体大小em解析 <style> /* em 说明*/ div {原创 2021-02-26 18:39:34 · 1687 阅读 · 0 评论 -
移动端常见布局总结(二)——flex布局(弹性布局)
二、flex布局1.1 传统布局和flex弹性布局 传统布局兼容性好布局繁琐局限性,不能在移动端很好的布局flex弹性布局操作方便,布局极为简单,移动端应用广泛。PC端浏览器支持情况较差。IE11或更低版本,不支持或仅部分支持。建议:如果是PC端,则选择传统布局如果是移动端,则使用flex弹性布局1.2 flex布局原理任何一个容器都可以使用flex布局灵活性大当父盒子设为flex布局后,子元素的float、clear和vertical-原创 2021-02-23 18:51:31 · 455 阅读 · 0 评论 -
移动端常见布局总结(一)——流式布局(百分比布局)
流式布局流式布局,也就是百分比布局。它实际通过将盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩,不收固定像素的限制,内容向两侧填充。要使宽度在合理范围内进行伸缩,故有以下两个属性进行操作max-width:最大宽度,(max-hight)一般为 640px 和 750pxmin-width:最小宽度,(min-hight)一般为 320px 和 350px案例:京东移动端首页1.1 准备工作建立相关文件设置视口标签以及引入初始化样式<meta name="viewpo原创 2021-02-23 18:46:43 · 1088 阅读 · 0 评论 -
移动端开发布局(一)— 视口、二倍图、常见布局
1. 移动端基础1.1 常见移动端屏幕尺寸1.2 移动端开发移动端开发,就是编写移动端的网页移动端浏览器主要对webkit内核进行兼容移动端开发主要针对手机端开发,pad屏幕较大,可以使用PC端界面现在移动端碎片化严重,分辨率和屏幕尺寸不一经常使用谷歌浏览器模拟手机界面并调试2. 视口2.1 布局视口 layout viewport移动设备的浏览器默认设置了布局视口,用于解决早期的PC端页面在手机上显示的问题。iOS,Android 都将这个视口分辨率设为980像素(由于PC端的原创 2021-02-23 18:01:27 · 1062 阅读 · 4 评论