书架
✨

书架

=一个知识书库=

响应式布局@media screen
313 字2 分钟

响应式布局@media screen

## 利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 ------ 1280分辨率以上（大于1200px） ```scss @media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px} } ``` <!--more--> 1
技术设计,前端,css
more...
px em rem vw wh vm等单位的区别
723 字3 分钟

px em rem vw wh vm等单位的区别

# 一、背景介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。 <!--more--> # 二、知识剖析 ## 1.px px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像
技术设计,前端,css
more...
window.location.hash 使用
1207 字5 分钟

window.location.hash 使用

location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。 **window.location.hash简单应用** **一、#的涵义** \#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如， 　　http://www.example.com/
技术设计,前端,html
more...
Plopfile.js使用
372 字2 分钟

Plopfile.js使用

### 1、为什么使用 Plop？ 一般项目开发过程中，我们都要编写(CV)一大堆重复性的代码，比如一个views/login/index.vue，比如store/modules/app.js，这些文件都是重复毫无意义的，找一个自动生成的工具就可以了。 ### 2、Plop是什么？ Plop 主要用于创建项目中特定文件类型的小工具，类似于Yeoman中的sub generator，一般不会独立使用。一般会把Plop集成到项目中，用来自动化的创建同类型的项目文件。 Plop插件地址：[https://www.npmjs.com/package/plop](https://
技术设计,前端,nodejs
more...
移动端H5input输入完成后页面底部留白问题
490 字2 分钟

移动端H5input输入完成后页面底部留白问题

> 最近在用`vue`写几个H5页面在微信上展示，遇到一个在弹窗上`input`输入完成之后点击键盘的完成，页面底部留出一片空白的问题 ![img](http://www.lixianglong.cn/bg_store/img/content/20190521155136.png) #### 出现原因分析 - 当键盘抬起时，`window.scrollY`会从0变到键盘的高度，所以解决办法就是当`input`失去焦点的时候，将`window.scrollY`重新设置为0 #### 解决 - 给所有的`input``textarea`组件设置获取焦点和设置焦点事件，
技术设计,前端,html
more...