2018年06月_劲枫

12月 11月 10月 09月 08月 07月 06月 05月 04月

原创【移动端适配视口viewport】移动端meta属性设置的理想视口是什么

1、看一下我的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--<meta name="viewport" content="initial-scale=0.33,maximum-scale=0.3

2018-06-29 13:38:01 2960

原创【移动端元素按比例缩放】用Padding-buttom撑开高度

1、在说容器按比例缩放前，我们先说下图片按比例缩放。对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放。图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频、div元素等元素则没有这个属性。一般在响应式中，我们会要求视频、或者一些图表、一些块元素的宽高比为16：9或4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候...

2018-06-28 10:06:46 2400

原创 2019前端布局方案：静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法：PC：居...

2018-06-27 16:39:53 1788

原创【移动端适配方案二弹性布局】Flex弹性布局+rem实现移动端适配（JS+rem+viewport）

前端开发工程师根据UI设计师给的设计稿进行开发。为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算，才能写进CSS实现如下：1、设置width=device-width 也就是将layout viewport（布局视口）的宽度设置为ideal viewport（理想视口）的宽度。网页缩放比例为100%时，一个CSS像素就对应一个 dip（设备逻辑像素）<met...

2018-06-26 13:42:21 6986 13

原创【移动端适配】为什么根元素font-size设置成100px或625%？

rem：是一个相对单位，相对根元素字体大小的单位，再直白点就是相对于html元素字体大小的单位。优点：这样在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算，根本就离不开计算器。首先看下图：html的字体大小设置为font-size:62.5%原因：浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，1...

2018-06-26 13:23:30 12234 2

原创 PHPStorm安装sass

1. 安装 PHPStorm 的 SASS 插件打开 setting -> plugins 搜索sass support2. 安装 RubyWindows 版本下载地址：http://rubyinstaller.org/downloads/Linux or Mac 地址：http://ruby.taobao.org/mirrors/ruby/3. 安装 SASS 和 Compass点击打开...

2018-06-25 16:09:06 1022 1

原创【移动端适配方案一弹性布局】@media标签+rem+viewport实现移动端屏幕适配

另一篇布局方案：【移动端适配方案二弹性布局】Flex弹性布局+rem实现移动端适配（JS+rem+viewport）一、从设计稿说起：采用rem来布局，其实设计稿是多大都没有关系，设计稿给480、600或者750都可以，其他尺寸也可以，你就想成它是一张A4纸，然后这些数字只是对这张纸的最大计量单位。反正一张图就那么大，无论计量单位是多少，UI设计师能够在一张A4上给的东西都是一样的。比...

2018-06-25 15:53:21 16033 3

原创移动端适配+响应式布局+从设计图到CSS（rem+viewport+媒体查询+Sass）

转自：https://www.cnblogs.com/gymmer/p/6883063.html根据UI图对移动端的h5页面做样式重构，是前端工程师的本职工作，看似简单，不过想做好却并不容易。下面总结一下其中要点。remrem是一种相对长度单位，参考的基准是<html>标签定义的font-size。比如：html { font-size: 16px;}.intro { ...

2018-06-25 14:04:58 1948 1

原创【PHP Fatal error: Class ‘Redis’ not found in 错误】windows下为PHP安装redis扩展操作redis

前言：首先要明白无论哪个语言要操作redis都需要先安装redis服务器（windows下安装方式、linux和max安装方式），这是安装redis服务器。安装好后，可以在cmd里面用redis自带的redis-cli客户端测试是否安装好。但是要用PHP、Python或者Java连接并操作redis都需要安装对应语言的扩展包，并在要操作的地方引入。就像Mysql一样，安装好后，还需要引...

2018-06-21 11:12:05 18448

1、redis官方下载地址：https://redis.io/download2、下载后文件2、修改redis.windows.conf文件，设置maxmemory 大小3、如果要用密码，就设置一下密码(每次启动redis-cli是要先输入auth password)4、启动redis在redis下载目录下，在命令窗口执行：redis-server.exe redis.windows.conf ...

2018-06-21 10:38:28 1143

原创 IIS无法启动计算机'.'上的服务w3svc与NT kernel & system占用80端口问题--之详细描述

前言：请看完文章，历经曲折，中途的解决方法都不行1、本来IIS是可以启动的，但是后来发现80端口被占用。运行‘netstat -ano’发现被pid=4的进程占用。打开任务管理器，发现pid=4的进程，其实是system进程，其对应的进程描述是NT kernel & system。网上描述运行net stop http(杀掉系统自带的http服务，确实可以关掉很多需要80端...

2018-06-20 11:46:41 10587 3

原创 js中的Object.defineProperty方法

直接来一个案例，介绍在后面<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>test</title></head><body><div id="test

2018-06-18 12:34:56 891

原创 PHP中$_SERVER['SCRIPT_FILENAME']和FILE的区别

二者都表明了本文件的绝对路径，区别在于，$_SERVER['SCRIPT_FILENAME']指向当前执行脚本的绝对路径；也就是在哪里执行的就在哪里。__FILE__指向当前文件的绝对路径；也就是写在哪个文件里就是哪里。结果为...

2018-06-14 20:53:25 342

原创 PHP魔术方法$$，可变的变量

<?php$name = "小明";$age = 22;$sex = "boy";$lists = [ "name" => 'xiaoming', "age" => 12, "sex" => 'girl'];foreach ($lists as $k => $v) { echo $$k . '

2018-06-14 20:27:57 194

原创 PHP魔术方法get()和set()用法

<?phpclass person{ private $name; function __set($_name, $_value) { $this->$_name = 'set-' . $_value; } function __get($_name) { return 'get-' . $this-&...

2018-06-14 17:32:58 406

原创解决windows10下无法安装.net framework 3.5，错误代码0x800F081F

1、首先下载package将下载的文件复制到复制到 C 盘的 Windows 文件夹后请在“命令提示符（管理员）”中执行下面的命令：dism /online /Enable-Feature /FeatureName:NetFx3 /Source:”%windir%” /LimitAccess2、勾选即可完成安装...

2018-06-14 12:54:09 21960 5

原创 PHP的RPC调用基本案例

开始使用下载phprpchttps://sourceforge.net/projects/php-rpc/files/OldFiles/phprpc_3.0.1_php.zip/download先来个简单的例子，phprpc也是分为服务器端和客户端的。所以文件夹中对应的就是phprpc_server.php 和 phprpc_client.php我们参考官网的几个例子，练习下：服务端service...

2018-06-09 16:49:34 4195

原创 PHP封装curl的函数

<?php/** * Created by PhpStorm. * User: jefferyteng * Date: 2018/6/9 * Time: 15:28 *//** * GET 请求 * @param string $url */function http_get($url){ $oCurl = curl_init(); if(stri...

2018-06-09 16:22:19 1348

原创利用LiveReload 和 phpstorm等开发工具自动刷新浏览器

1、下载chrome插件 2、点击livereload详细信息3、点击允许访问文件网址 4、下载livereload客户端livereload5、将要自动刷新的文件目录加到livereload6、先打开要访问的页面，点击livereload的chrome插件，表示开始监控这个页面...

2018-06-07 14:51:52 1847

原创 HTML页面元素拖动

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> html { font-size: 1

2018-06-06 14:43:46 2778

node-sass和sass-loader下载.zip

直接下载node-sass和sass-loader下载，然后拷贝到node-modules下即可，再次npm install就不会报错了

2020-02-18

vue中vuex模板

一个简单的自用的vuex模板，定义好了层级目录关系store(actions，getters，mutation-types，mutations，state，index)

2019-05-02

nvm_setup1.1.7

2019/04/29 最近因工作需要学习node.js技术，使用nvm能更好的管理node版本，此版本为1.1.7版本

2019-04-29

nvm安装node

已经配置好的nvm文件！

2018-09-20

node版本控制nvm

node版本控制工具nvm的安装包！

2018-09-20

php操作kafka的扩展包php-rdkafka

php操作kafka的扩展包，php直接操作kafka所必须安装的扩展

2018-08-27

php操作kafka的扩展包librdkafka

php操作kafka的扩展包librdkafka，在使用kafka的时候必须先安装librdkafka

2018-08-27

移动端适配+响应式开发参考代码

设计稿的宽度：designWidth 允许自适应的最大宽度（超过这个值屏幕元素不在自适应增大）:maxWidth 页面顶部加上：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" > 这段js的传入两个参数:一个为设计稿实际宽度，一个为显示的最大宽度（允许的屏幕最大宽度，用来限制屏幕过大之后元素还会自适应增大的）例如设计稿为750，最大宽度为600，则为(750,600)，屏幕大于600之后就不会自适应变大了，也相当于在用@media属性时min-width只设置到了600，没有后面的屏幕尺寸，就不会再变化了公式：1rem = 浏览器屏幕宽（width） * 100 / 设计稿宽(designWidth) (750,750)含义1rem = clientWidth * 100 / 750 (750,2160)含义1rem = clientWidth * 100 / 750 clientWidth是动态获取的后

2018-06-26

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

劲枫的博客