移动端开发
关注
分享
扫一扫
文章平均质量分 68
但行好事wlw
踏实做人，认真做事。
展开
-
Bootstrap【栅格布局】【笔记】
栅格布局栅格布局是用于Bootstrap框架中的页面分配，它的作用主要是做响应式页面方面，能够适应现在我们的手机，pid，电脑，更大屏幕的电脑。只需要做一个页面就可以适配这四种情况哦。非常的方便，相比较之前我们聊得流式布局，flex布局，rem布局，栅格布局显得更简单啦。那么怎么操作呢？原理是什么呢？往下面看…之前我们说过rem布局的时候需要把屏幕分成你需要的份数，然后用总屏幕宽度除以这个分数得出，font-size的值，以方便我们后边求页面元素的大小引用这个字体大小进行运算，这是之前讲的rem布局，里原创 2021-11-12 20:40:21 · 2372 阅读 · 0 评论 -
媒体查询 rem布局【微重点】案例
rem布局经过之前聊得流式布局，以及flex布局，今天我们聊聊rem布局，怎么做呢？其实分三布就可以啦。确定你的项目的页面宽度分成多少等份利用媒体查询设字体大小量出你设计图上的宽高，除以字体大小，单位为rem。这样设计以后 你设计的页面就可以实现多尺寸大小自适应啦。（利用上面的思路做个自适应块儿） // 结构<body> <header class="header"> </header></body>原创 2021-11-11 15:35:54 · 863 阅读 · 0 评论 -
less安装教程【详细】 以及使用
less的安装教程由于less是基于node环境的，因此想使用less必须先安装node.js。安装node.js步骤：首先找到网站Node.js官网上下载适应你电脑的环境，我在这里选择的是Windows X64位的。判断是否安装成功：打开cmd命令窗口，输入node -v 看看会不会显示你安装的node的版本，如果显示了，说明安装成功。如图：(安装成功)在命令窗口下接着输入下载less的命令语句：npm install -g less 安装，输入lessc -v查看是否成功安装。安装成原创 2021-11-10 15:59:33 · 17821 阅读 · 3 评论 -
flex布局（使用场景）[微重点]案例
flex布局前面使用的流式布局，全程都在使用百分比，还需要不断地计算，稍有失误，就不太合适了。今天我们用flex来布局，flex又称作弹性盒子，可以随意伸缩改变其大小，不影响布局。非常好用。那么他的使用场景有哪些呢？首先是在移动端开发中使用，因为pc端有些浏览器兼容性不太好，但是移动端是支持的，可以放心使用；第一个场景就是制作搜索栏的时候，右边一个搜索，想让左边的搜索框自适应，这个时候用弹性盒子最合适不过了。先说一下布局思路，首先有一个父盒子包裹两个子盒子，给搜索按钮的大小可以写死，接下来就是设置搜原创 2021-11-09 17:12:13 · 1450 阅读 · 0 评论 -
移动端开发 【流式布局】（微重点）
移动端开发之流式布局流式布局：特点：只限定宽度百分比，高度不管（eg:京东app页面的制作）流式布局都要注意哪些点呢？第一先设置head标签中的mater标签，给他添适应屏幕大小宽度，最小宽度，最大宽度，不能用手放大缩小页面<meta name="viewport" content="width=device-width, initial-scale=1.0" , user-scalable=no ,maximum-scale=1.0,minimum-scale=1.0;>；第二设置body原创 2021-11-08 14:01:37 · 218 阅读 · 0 评论