1、页面布局： 由于手机型号多样导致页面高宽比非常多，在制作上会有出现不同手机在同一套css下面显示效果不尽如人意，所以需要进行兼容性处理。 方式很多比如直接套用类似bootstrap类的框架，可以使用rem等相对单位。这里我主要使用的是媒体查询和vw和vh单位和百分比来进行处理。 100vw为整个 ...
分类：
移动开发 时间：
2019-05-21 13:15:12
阅读次数：
154
当我们在做网页时，应当充分考虑到网页自适应的问题 否则可能会出现同一个网页在不同的屏幕尺寸上排版布局混乱的情况 方案一：用比例控制大小 1. ++在网页代码的头部，加入一行viewport元标签++ 以下是相关的属性的解释： 1. width ：控制 viewport 的大小，可以指定的一个值，如 ...
分类：
其他好文 时间：
2019-05-19 20:48:04
阅读次数：
191
1. 宽高百分比，不要固定死; 2. 弹性盒flex css3; 3. 单位（em、rem）px; 4. 媒体查询 利器 @media switch 960 1200; 5. gtid布局 网格布局; 6. view port 手机布局利器; 7. 框架布局 bootstrap、amazeUI、pu ...
分类：
其他好文 时间：
2019-05-18 15:47:48
阅读次数：
105
@media 查询 @media 媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是个不错的选择 用法： @media 设备类型 and (设备特性-宽度) { // css 样式 } / ...
分类：
Web程序 时间：
2019-04-27 22:48:14
阅读次数：
571
目录 1、transition过渡 1.1简写：transiton：transition-property | transition-duration | transition-timing-function | transition-delay 1.2transition-poperty(过渡属性 ...
分类：
其他好文 时间：
2019-04-07 22:06:51
阅读次数：
177
此前有网友反馈，主机排行网在移动端表现太丑了，希望我改改，今天周末，我专门花了两个多小时来好好把移动短整治了一下，比以前好看多了。 对比改变 对比一下吧，下图是前版本的主机排行网： 新版效果： 本次修改的过程 我此前也从没真正做过移动端适配的事情，只是初步了解是通过媒体查询来做的，即当浏览器界面满足 ...
分类：
移动开发 时间：
2019-03-31 18:08:05
阅读次数：
139
前言：在一些不复杂的页面，只需要在pc端显示，就不需要一些大框架写，但是可以借鉴bootstrap的方法。 1，首先对设备进行媒体查询 解析： @media only screen and (min-width:xxx) and (max-width:xxx) 与 @media screen and ...
分类：
其他好文 时间：
2019-03-26 22:30:47
阅读次数：
180
PC端************ 按屏幕宽度大小排序（主流的用橙色标明） 分辨率 比例 | 设备尺寸 1024*500 （8.9寸） 1024*768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ） 1280*800（16：10 |15.4寸） 1280*1024(比例：5：4 | ...
分类：
其他好文 时间：
2019-03-19 10:35:24
阅读次数：
1282
|内容|参数| | | | | OS| Windows 10 x64| | browser| Firefox 65.0.2| | framework |& ...
分类：
其他好文 时间：
2019-03-17 10:30:41
阅读次数：
155
