当今，中国网页一般都是分为APP和PC端来进行布局的，意思是写套网页。 在国外，一般都是写一套，自适应的网页。 今天，简单的介绍下，通过@media这种媒体查询，通过改变屏幕的宽度，从而来达到自适应的效果 和平时单独分开写网页有点不一样，这种自适应的网页，需要我们建立3个css文件，意思是要引用3个 ...
分类：
其他好文 时间：
2016-09-25 22:27:42
阅读次数：
199
1、自适应页面：能使页面自适应显示在不同大小终端设备上的页面。2、响应式布局：一个网站能够兼容多个终端，而不是为每个终端都做一个特定的版本，实现响应式布局的方法：bootstrap和CSS原生代码两种方法。3、CSS原生代码是通过@Media媒体查询，改变屏幕宽度使其自适应。4、响应式布局中：单位1 ...
分类：
其他好文 时间：
2016-09-25 22:09:39
阅读次数：
140
响应式设计 弹性盒模型、百分比宽高、媒体查询 适用什么？对于重内容的网站，例如形象展示，则比较适合使用响应式web设计 不适用什么？对于重功能的网站，如电子商务，门户类，则更推荐使用独立移动网站原因：功能多，页面复杂， 页面体积变大，消耗流量，不如直接做一个轻量级的h5 Web app，便于分离以及... ...
分类：
Web程序 时间：
2016-09-24 19:08:45
阅读次数：
205
微信开发的时候，如果页面顶部有轮播图，底部有导航栏，中间是栏目，那么让中间的栏目，如何根据设备的高度，来进行自适应的填充呢？ 首先想到的是运用媒体查询，但是媒体查询效果差，效率低，所以就运用jQuery写法来进行实现。 效果图： 首先知道顶部的轮播图的固定高度是200px，底部的导航栏固定高度是50 ...
分类：
微信 时间：
2016-09-23 14:53:32
阅读次数：
279
第32 章项目实战-移动端流体布局[3]学习要点：1.搜索部分2.旅游部分3.媒体查询 本章主要开始如果通过第一个PC 端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．搜索部分搜索部分包含三个内容，背景区块、文本框和按钮。//HTML 部分<div id="search">< ...
分类：
移动开发 时间：
2016-09-20 11:51:54
阅读次数：
210
css原生代码实现响应式布局：@media媒体查询：1.PC端：@media screen and ( min-width:1000px){...} 2.平板端：@media screen and (min-width:768px) and (max-width:999px ){...} 3.手机端 ...
分类：
其他好文 时间：
2016-09-19 01:19:16
阅读次数：
152
使用zepot做轮播图<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, mi ...
分类：
移动开发 时间：
2016-09-17 00:28:13
阅读次数：
538
什么是rem 在我看来，rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了，就不用什么媒体查询那些的。 我们的设计图往往宽度是640或者其他尺寸的，不过我建议是用这个尺寸，以640为基准 ...
分类：
Web程序 时间：
2016-09-15 00:54:17
阅读次数：
362
本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：CSS基础教程 —— 媒体查询屏幕适配 响应式布局 Media Query 的使用方法在上例中， 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可 ...
分类：
Web程序 时间：
2016-09-12 10:57:23
阅读次数：
212
适应网页如何写：第一理念，宽度用百分比表示；第二理念，div模块化；第三，页面浮动式布局；第四，媒体查询；第五，js自适应设置总结，国内其实很多网站都在采用自适应的写法了，比较典型的就是果壳网，如果想学习怎么写的话，可以去看看那些小众网站，他们的代码加有备注 适应网页如何写：第一理念，宽度用百分比表 ...
分类：
其他好文 时间：
2016-09-07 17:33:00
阅读次数：
129
