H5W3
当前位置:H5W3 > CSS3 > 正文

CSS相关——记录学习5/6/2018(有摘录部分

今天目标:

  1.     查看学习资料–《viewport——什么是viewport》
  2.     学会使用viewport对html进行优化,适配移动设备  
  3.     学会使用Chrome的开发者工具(F12/Ctrl+shift+I),模拟手机访问网页
  4.     配置nginx,手机上直接访问网页

大致内容就是这些没有什么特别的内容,就是针对昨天的学习进行进一步探索。

一.什么是viewport?


(摘录)

“viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做”视区”。

手机浏览器是把页面放在一个虚拟的”窗口”(viewport)中,通常这个虚拟的”窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:

<metaname="viewport"content="width=device-width, initial-scale=1.0">
  • width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
  • height:和 width 相对应,指定高度。
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale:允许用户缩放到的最大比例。
  • minimum-scale:允许用户缩放到的最小比例。
  • user-scalable:用户是否可以手动缩放。”

出处:http://www.runoob.com/css/css-rwd-viewport.html


通过上文,可以清楚知道一点,关于viewport就是一种为了适配移动设备而存在的标签。

二,三.使用Chrome调试工具调试,适配移动设备


就是写设置的问题,容易解决,添加标签即可。

CSS相关——记录学习5/6/2018(有摘录部分

四.Nginx


照惯例,Nginx是什么?Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Рамблер)开发的,第一个公开版本0.1.0发布于2004年10月4日。

  1.     下载与安装

    进入官网后首先点击最新的2017:

    CSS相关——记录学习5/6/2018(有摘录部分

 

点击        CSS相关——记录学习5/6/2018(有摘录部分

CSS相关——记录学习5/6/2018(有摘录部分

选择稳定版 点击后即可下载

下载完毕后解压即可

CSS相关——记录学习5/6/2018(有摘录部分

打开时一闪而过,起初以为是炸了,查了写教程才知道这是正常现象,说是输入“localhost”即可访问,但是我输入后并打开哲王爷显示的确实错误,而后有查了写教程才知道,在文件夹下的logs文件夹,有错误日志输出,于是。

CSS相关——记录学习5/6/2018(有摘录部分

CSS相关——记录学习5/6/2018(有摘录部分

emmm….看不懂,怎么办? 百度咯,得到的结果是这样的原因:“中文路径的锅。”于是用这样的解决思路去吧文件挪出中文文件夹,果然成功进入localhost,于是就这样成功在log文件夹显示”success”。

CSS相关——记录学习5/6/2018(有摘录部分

成功进入welcome界面:

CSS相关——记录学习5/6/2018(有摘录部分

但是,不出意料的是,应该如何去访问我们要指定的网页位置呢?

这就需要进入:

CSS相关——记录学习5/6/2018(有摘录部分     文件夹,然后再进入

使用记事本打开,并且进入修改其内容。

CSS相关——记录学习5/6/2018(有摘录部分

我这里图快,就不写解决报错和问题的过程了,单纯写一下是如何解决问题的总结吧,

nginx这个软件比较挑路径名,正常windows操作系统上的\xxx\这样的路径是不能用的,

需要用xxx/xxx。

然后可以通过localhost访问啦

另外,手机可以通过cmd查询ip(ipconfig),查询后直接访问运行”nginx.exe”的机器上的ip就可以实现局域网内访问网页了~

总结!

今天主要学习了nginx的使用方法,以及如何配置,要适度学习了Git的初步使用方法~

未经允许不得转载:H5W3 » CSS相关——记录学习5/6/2018(有摘录部分

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址