黑马程序员技术交流社区

标题: PHP微信公众平台开发第二天资源（有源码） [打印本页]
作者: 播妞    时间: 2017-9-27 14:09
标题: PHP微信公众平台开发第二天资源（有源码）
一、响应式网页设计

1、为什么需要响应式设计
•随着3G、4G网络的普及，越来越多的人使用手机上网。
•移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？

2、早期的解决方案
•手机的屏幕比较小，宽度通常在768像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
•很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个Wap版本。这样做固然保证了效果，但是比较麻烦，同时要维护多个版本，而且如果一个网站有多个入口，会大大增加架构设计的复杂度。

3、解决方案
•于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

4、响应式设计
•2010年，Ethan Marcotte（伊森·马克特）提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
•他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

PC版效果图：

平板端与手机端效果图：



二、响应式设计详解
1、viewport标签
•<meta name="viewport" content="width=device-width, initial-scale=1" />
•上面这行代码的意思是，面积的100%。网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕

2、媒体查询
•"自适应网页设计"的核心，就是CSS3引入的Media Query
•自动探测屏幕宽度，然后加载相应的CSS文件。
•<link rel="stylesheet" type="text/css" media="screen and (max-width: 767px)" href="phone.css" />
•上面的代码意思是，如果屏幕宽度小于767像素（max-width:767px），就加载phone.css文件。
•<link rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" href=“style.css" />
•如果屏幕宽度宽度大于768px，则加载style.css文件。

3、不使用绝对宽度
•由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
•具体说，CSS代码不能指定像素宽度：
•如：width:xxx px;
•只能指定百分比宽度：
•如：width: xxx %;

4、相对大小的字体
•字体也不能使用绝对大小（px），而应使用相对大小（rem）。
•rem字体大小是相对于根元素<html>字体大小 ，默认网页根元素大小为100%，即16像素，所以1rem = 16px；（0.75rem = 12px，0.875rem = 14px）
•在实际项目中，可以使用如下方式设置：
     html {font-size:62.5%} 即 1rem = 10px

5、图片自适应
•除了布局和文本，“自适应网页设计”还必须实现图片的自动缩放。
     img { max-width: 100%;}
   
•为了保证所有多媒体标签实现自适应也可以设置
     object ,embed { max-width: 100%;}.....................


以上为部分资料，全部笔记已整理为PDF版本，大家可回帖下载
第二天笔记.pdf (2.79 MB, 下载次数: 184, 售价: 3 黑马币)
作者: taozi96    时间: 2017-9-29 17:34
回帖。。。。。。
作者: 石慧    时间: 2017-10-10 11:51

回帖。。。。。。
作者: 石慧    时间: 2017-10-10 11:53
占楼,签到+1.....
作者: zarkclack0209    时间: 2017-10-10 18:12
在学习了
作者: 含泪跳恰恰    时间: 2017-10-13 00:14
好的，很好的学习视频！
作者: 2508598471    时间: 2017-10-14 13:22
感谢分享!!!!!
作者: keke12300    时间: 2017-10-18 16:43
感谢分享哦
作者: 丶囚笼计    时间: 2017-10-19 16:50
不错 学习了
作者: 可爱的小曾哥    时间: 2017-10-19 20:07
我爱php
作者: IF_Love    时间: 2017-10-24 15:23
回帖。。。。。。
作者: jixieshi    时间: 2017-10-26 00:34
666感谢分享哦
作者: jixieshi    时间: 2017-10-26 00:37

回帖啦。。。。。。
作者: 大慈相    时间: 2017-10-30 09:18
感谢分享
作者: comebas    时间: 2017-11-8 20:26

感谢分享哦
作者: jayson2000    时间: 2017-11-16 13:44
正在学习中
作者: simple波    时间: 2017-11-16 14:05
+1.。。。。。。。。。。。。。。
作者: 一城之间    时间: 2017-11-22 08:52
fighting
作者: wawe    时间: 2017-11-25 18:30
非常棒，期待第三份笔记！
作者: AllenPHP    时间: 2017-12-7 21:13
wawe 发表于 2017-11-25 18:30
非常棒，期待第三份笔记！

good good good
作者: zpmloveyou    时间: 2017-12-9 22:50
33333333333333333333333333333333333333333333333333
作者: 嘿嘿哟    时间: 2017-12-13 13:30
哈哈  开心 好资料
作者: 嘿嘿哟    时间: 2017-12-13 13:32
再次感谢！！！
作者: 溜达的鱼    时间: 2017-12-19 12:51
感谢分享感谢分享
作者: caolulu    时间: 2017-12-29 11:48
学习中,之前没接触过这方面，最近需要，正好学习1了
作者: linweida00    时间: 2017-12-29 16:48
非常详细，感谢分享。
作者: Jeffshaw    时间: 2018-1-23 11:56
回帖.........
作者: heima_c    时间: 2018-3-11 19:02
回贴...非常好
作者: 我是一棵小草    时间: 2018-3-15 18:01
怎么下载呢
作者: gary1998    时间: 2018-4-7 15:26
感谢分享。有源代码分享吗？
作者: gary1998    时间: 2018-4-7 15:26
学习。棒棒哒。
作者: BiancoFeifei    时间: 2018-4-9 20:06
感谢，原来可以这样，我一直想的是做不同的页面
作者: hahahhh    时间: 2018-4-10 00:27
谢啦谢啦
作者: wg596    时间: 2018-4-10 13:04
学习学习
作者: 骑牛的小伙    时间: 2018-4-13 23:05
努力努力
作者: 番茄炒鸡蛋    时间: 2018-4-15 08:07
响应式布局！~
作者: 发的    时间: 2018-4-16 14:22
作者: 余生好长    时间: 2018-4-23 17:38
终于找到你。。。
作者: 李佳杰    时间: 2018-4-26 14:32
学习学习
作者: 李佳杰    时间: 2018-4-26 14:33
学习学习
作者: IWantToBe...    时间: 2018-5-2 15:57
感谢分享。。。。
作者: ren@qq.com    时间: 2018-5-17 14:31
棒啊，谢谢分享
作者: xiaomm111    时间: 2018-8-9 17:15
来看看！！！
作者: tapman    时间: 2018-8-30 17:40
谢谢资料~~
作者: SnowmanNunu    时间: 2018-9-12 15:44
回帖回帖
作者: 对、菜鸟    时间: 2018-12-17 13:46
非常想看看到底笔记啥样
作者: 木流牛马    时间: 2018-12-17 15:11

好的，很好的学习视频！
作者: 琉修子    时间: 2018-12-25 20:42
播妞 发表于 2017-9-27 14:09
一、响应式网页设计

1、为什么需要响应式设计

。。。。。。。。。。。。。。。。
作者: oujaichong    时间: 2018-12-30 18:21

谢谢，非常感谢分享
作者: 李军林    时间: 2019-1-6 20:30
作者: yzc2019    时间: 2019-1-20 23:08
6666666666666666666
作者: tanhongjian    时间: 2019-4-11 10:02
这个笔记不是微信开发第二天笔记
作者: 晓小滴星辰    时间: 2021-7-2 06:34
回帖，求一份PHP学习资源，谢谢
作者: 晓小滴星辰    时间: 2021-7-2 06:35
请问怎么获取资源



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2