全部项目分类
<ins class="adsbygoogle"
style="display:inline-width:250height:250px"
data-ad-client="ca-pub-9510"
data-ad-slot=""
hisupplier.com
<ins class="adsbygoogle"
style="display:inline-width:250height:250px"
data-ad-client="ca-pub-9510"
data-ad-slot=""
共 90 个项目
上次更新: 日jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行，越来越多的网页越来越简单但又看上去高大上，比如小米、魅族、苹果等等知名站点的新品页面，以及360、百度等网站的专题页面越来越采用分屏滚动的风格。
当然实现这种风格的方法有多种多样的，千奇百怪。但在这里就不得不提到一款较轻量级的基于jQuery的JS类库，那就是fullPage.js，该库的开发版大小约为90kb，为压缩版JQ的大小，而压缩版为20KB左右。包括魅族、苹果等知名网站也采用过该库，也可以说明它确实还行。那么下面整理一些相关的资料，分享出来供大家备用。
github地址：
演示地址：（国外的你懂的，建议大家看下面国内的吧）
魅蓝note2专题页面：
其他CDN资源：
特征与功能
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
可基于jQuery 1.7+版本
兼容Chrome、火狐、Opera、safari、以及IE8+
1、引入库文件
&link rel="stylesheet" href="css/jquery.fullPage.css"&
&script src="js/jquery.min.js"&&/script&
&!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 --&
&script src="js/jquery.easings.min.js"&&/script&
&!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 --&
&script src="js/jquery.slimscroll.min.js"&&/script&
&script src="js/jquery.fullPage.js"&&/script&
2、HTML基本结构
&div id="page"&
&div class="section"&
&h3&第一屏&/h3&
&div class="section"&
&h3&第二屏&/h3&
&div class="section"&
&h3&第三屏&/h3&
每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：
&div class="section active"&第三屏&/div&
同时，可以在 section 内加入 slide，如：
&div id="page"&
&div class="section"&第一屏&/div&
&div class="section"&第二屏&/div&
&div class="section"&
&div class="slide"&第三屏的第一屏&/div&
&div class="slide"&第三屏的第二屏&/div&
&div class="slide"&第三屏的第三屏&/div&
$(function(){
$('#page').fullpage();
插件参数及方法等
verticalCentered
内容是否垂直居中
字体是否随着窗口缩放而缩放
slidesColor
设置背景颜色
定义锚链接
scrollingSpeed
滚动速度，单位为毫秒
easeInQuart
滚动动画方式
绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation
是否显示项目导航
navigationPosition
项目导航的位置，可选 left 或 right
navigationColor
项目导航的颜色
navigationTooltips
项目导航的 tip
slidesNavigation
是否显示左右滑块的项目导航
slidesNavPosition
左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor
左右滑块的箭头的背景颜色
loopBottom
滚动到最底部后是否滚回顶部
滚动到最顶部后是否滚底部
loopHorizontal
左右滑块是否循环滑动
autoScrolling
是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow
内容超过满屏后是否显示滚动条
是否使用 CSS3 transforms 滚动
paddingTop
与顶部的距离
paddingBottom
与底部距离
fixedElements
normalScrollElements
keyboardScrolling
是否使用键盘方向键导航
touchSensitivity
continuousVertical
是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor
normalScrollElementTouchThreshold
moveSectionUp()
moveSectionDown()
moveTo(section, slide)
moveSlideRight()
slide 向右滚动
moveSlideLeft()
slide 向左滚动
setAutoScrolling()
设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling()
添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()
添加或删除键盘方向键控制
setScrollingSpeed()
定义以毫秒为单位的滚动速度
3、回调函数
滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender
页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad
滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave
某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数
如果你想使用fullpage快速应用而又不想在项目中使用JQ，不妨访问下这篇文章——《》
转载请注明出处：jQuery全屏滚动插件fullPage.js让你的页面分屏滚动 - 木泉网
Powered by WordPress. 湘ICP备号-3
湘公网安备 01号CSS3+fullPage.js实现全屏滚动效果代码
&#xe609;原创
&#xe60e; 11:35:03
&#xe756;835
这篇文章主要为大家详细介绍了fullPage.和CSS3实现全屏滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下首先说一下fullpage，它是一个的插件，用来实现鼠标向上向下滑动，就会自动切换到上一屏或者下一屏，对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。 总共有四屏的内容 当鼠标每次上下滑动时就会一整屏的切换。第一屏是用一个图片，其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。这三屏左侧的图片展开方式不同，所以就更有炫酷的效果。 第二屏的三个图片是当页面显示时从下到上依次出来到正确的位置。 第三屏的三个图片是当页面显示时从左到右依次展开到正确的位置。 第四屏的三个图片是当页面显示时从中间到两边展开到正确的位置。第一步：下载好jquery和fullpage插件，fullpage中包含css和js并引入。&script type=&text/javascript& src = &./jQuery/jquery-3.2.0.min.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&./fullpage/jquery.fullPage.css&&
&script type=&text/javascript& src = &./fullpage/jquery.fullPage.min.js&&&/script&第二步：用html建立好元素：&p class = &main&&
&p class=&section page1&&
&img src=&./images/page1.png&&
&p class=&section page2&&
&p class = &list&&
&img src = &./images/page2_1.png&&
&img src = &./images/page2_2.png&&
&img src = &./images/page2_3.png&&
&img class = &text& src = &./images/page2_4.png&&
&img class = &bg& src = &./images/page2_5.png&&
&p class=&section page3&&
&p class = &list&&
&img src = &./images/page3_1.png&&
&img src = &./images/page3_2.png&&
&img src = &./images/page3_3.png&&
&img class = &text& src = &./images/page3_4.png&&
&img class = &bg& src = &./images/page3_5.png&&
&p class=&section page4&&
&p class = &list&&
&img src = &./images/page4_1.png&&
&img src = &./images/page4_2.png&&
&img src = &./images/page4_3.png&&
&img class = &text& src = &./images/page4_4.png&&
&img class = &bg& src = &./images/page4_5.png&&
&p id = &audioBox&&
&audio id = &audio& autoplay loop src= &./music/music.mp3&&&/audio&
&/p&包含了四屏的内容和一个audio元素，用于播放音乐。第三步：利用fullpage的js实现每一屏的背景颜色 ，并使用js实现音乐的暂停播放//1.fullpage，由于有四屏，其颜色也一样
$(&.main&).fullpage({
sectionsColor: [&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;]
//2.控制音频的播放
var audioBox = document.getElementById(&#39;audioBox&#39;);
var audio = document.getElementById(&audio&);
audioBox.onclick = function(){
if(audio.paused){
audio.play();
audio.pause();
}第四步：利用css进行布局：&style type=&text/css&&
margin: 0;
padding:0;
//设置背景音乐的图标
#audioBox{
height: 45
background: url(./images/music_on.png) no-
border-radius: 22
right: 3%;
//让每屏超出的都自动隐藏
/*设置第一屏的图片，因为第一屏也只有一个图片*/
.page1 img{
width: 50%;
margin-left: 30%;
/*从第二屏开始都包含一个class=list的元素块，设置其距离左侧的距离*/
[class *= &page&] .list{
margin-left: 5%;
/*让左边的图片的宽度都为240px*/
[class *= &page&] .list img{
width: 240
/*利用属性选择器，选出所有页的背景图片*/
[class *= &page&] .bg{
bottom: 5%;
right: 5%;
width: 30%;
/*利用属性选择器，选择出所有页的文字图片*/
[class *= &page&] .text{
right: 5%;
}通过第四步之后基本效果就已经完成了，但最后一点就是还没有给四屏的图片实现效果。第五步：实现动画效果。 1.怎样判断当前滚动到了哪一屏？ 因为fullpage会给当前页加一个active的class，所以利用class就可以判断处于当前页的时候触发动画。 2.实现第一屏的动画 第一屏主要是图片的淡入效果。 思路:通过改变opacity属性，结合transition来改变透明度，实现淡入的效果；.page1 img{
opacity: 0;
/*初始状态为全透明*/
/*加上供应商前缀，持续时间为1.5s*/
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
/*当第一页显示的时候触发,当第一页时就会自动加上active类*/
.page1.active img{
opacity: 1;
}3.实现第二屏的动画： 第二屏的动画，就是左侧的三个图片在页面显示时，从下到上依次滑进窗口。 核心思路 ：使用transm:translateY 和transition配合实现; transition是检测属性值变化 translateY平移/*动画的完成时间为1s，初始位置三个图片都处于向下移动到1000像素，即移出屏幕外。*/
.page2 .list img{
transition:1s;
transform: translateY(1000px);
/*当第二屏触发时，图片回到原始位置*/
.page2.active .list img{
transform:translateY(0px);
/*利用结构化伪类找到每一个图片并设置延时，为了使动画更灵活*/
.page2 .list img:nth-child(1){
transition-delay: 0.5s;
.page2 .list img:nth-child(2){
transition-delay: 0.8s;
.page2 .list img:nth-child(3){
transition-delay: 1s;
}4.实现第三屏的动画 有了translateY那么第三屏是向左右移动，必然会有translateX控制水平方向。首先初始状态让三张图片都重叠在最左侧，当触发动画时依次铺开，仿照第二屏的例子，很容易写出来‘ .page .list img{
/设置动画持续时间为1s，动画开始时延迟0.5s/
transition: 1s 0.5s;
}由于本屏的两个图片初始状态的位置都要叠加在最左侧的图片上，所以对于这两个图片分别设置它们的translateX.page .list img:nth-child(2){
/向左移动了250px刚好与第一个重叠/
transform:translateX(-250px);
.page .list img:nth-child(3){
/向左移动了500px刚好与第一个重叠/
transform:translateX(-500px);
/设置触发时的动画，让所有的img归位/
.page3.active .list img{
transform:translateX(0px);
}5.设置第五屏的动画。 第五屏的动画就是左侧的三个图片先重叠在中间的图片上，触发后归位。 ①.依照上面的思想利用tanslateX可以实现；.page4 .list img{
transition: 1s 0.5s;
/*设置第一个和第三个的初始位置处于中间的位置上*/
.page4 .list img:nth-child(1){
transform:translateX(250px);
.page4 .list img:nth-child(3){
transform:translateX(-250px);
/*触发时归位*/
.page4.active .list img{
transform:translateX(0px);
}②.除了css3的transition和transform属性，还可以利用css3的动画：frames.page4.active .list img:nth-child(1){
transform:translateX(0px);
-webkit-animation: &#39;flymove1&#39; 1s ease-in 1;
/*动画名、持续时间、更细粒度动画，重复次数*/
.page4.active .list img:nth-child(3){
transform:translateX(0px);
-webkit-animation: &#39;flymove2&#39; 1s ease-in 1;
@-webkit-keyframes flymove1{
0%{ transform: translateX(250px);}
100%{ transform: translateX(0px);}
@-webkit-keyframes flymove2{
from{ transform: translateX(-250px);}
to{ transform: translateX(0px);}
}关于keyframes的参数的了解，可以查一下手册，熟悉一下就可以了。通过上面的代码，一个炫酷的全屏滚动页面就完成了！附上源代码：&!DOCTYPE html&
&meta charset = &utf-8& /&
&title&fullpage 实现全屏滚动&/title&
&script type=&text/javascript& src = &./jQuery/jquery-3.2.0.min.js&&&/script&
&link rel=&stylesheet& type=&text/css& href=&./fullpage/jquery.fullPage.css& rel=&external nofollow& rel=&external nofollow& &
&script type=&text/javascript& src = &./fullpage/jquery.fullPage.min.js&&&/script&
&style type=&text/css&&
margin: 0;
padding:0;
#audioBox{
height: 45
background: url(./images/music_on.png) no-
border-radius: 22
right: 3%;
/*设置第一屏的图片*/
.page1 img{
width: 50%;
margin-left: 30%;
[class *= &page&] .list{
margin-left: 5%;
[class *= &page&] .list img{
width: 240
/*所有页的背景图片*/
[class *= &page&] .bg{
bottom: 5%;
right: 5%;
width: 30%;
/*所有页的文字图片*/
[class *= &page&] .text{
right: 5%;
/*第一屏图片的动画
思路:通过改变opacity属性，结合transition来改变透明度，实现淡入的效果;
.page1 img{
opacity: 0;/*初始状态为全透明*/
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
/*当第一页显示的时候触发*/
.page1.active img{
opacity: 1;
/*第二页的动画
核心思路 ：使用transform:translateY 和transition配合实现;
transition是检测属性值变化
translateY平移
.page2 .list img{
transition:1s;
transform: translateY(1000px);
.page2.active .list img{
transform:translateY(0px);
.page2 .list img:nth-child(1){
transition-delay: 0.5s;
.page2 .list img:nth-child(2){
transition-delay: 0.8s;
.page2 .list img:nth-child(3){
transition-delay: 1s;
/*设置第三页的动画*/
.page3 .list img{
transition: 1s 0.5s;
.page3 .list img:nth-child(2){
transform:translateX(-250px);
.page3 .list img:nth-child(3){
transform:translateX(-500px);
.page3.active .list img{
transform:translateX(0px);
/*设置第四页的动画*/
/*.page4 .list img{
transition: 1s 0.5s;
.page4 .list img:nth-child(1){
transform:translateX(250px);
.page4 .list img:nth-child(3){
transform:translateX(-250px);
.page4.active .list img{
transform:translateX(0px);
.page4.active .list img:nth-child(1){
transform:translateX(0px);
-webkit-animation: &#39;flymove1&#39; 1s ease-in 1; /*动画名、持续时间、更细粒度动画，重复次数*/
.page4.active .list img:nth-child(3){
transform:translateX(0px);
-webkit-animation: &#39;flymove2&#39; 1s ease-in 1;
@-webkit-keyframes flymove1{
0%{ transform: translateX(250px);}
100%{ transform: translateX(0px);}
@-webkit-keyframes flymove2{
from{ transform: translateX(-250px);}
to{ transform: translateX(0px);}
&p class = &main&&
&p class=&section page1&&
&img src=&./images/page1.png&&
&p class=&section page2&&
&p class = &list&&
&img src = &./images/page2_1.png&&
&img src = &./images/page2_2.png&&
&img src = &./images/page2_3.png&&
&img class = &text& src = &./images/page2_4.png&&
&img class = &bg& src = &./images/page2_5.png&&
&p class=&section page3&&
&p class = &list&&
&img src = &./images/page3_1.png&&
&img src = &./images/page3_2.png&&
&img src = &./images/page3_3.png&&
&img class = &text& src = &./images/page3_4.png&&
&img class = &bg& src = &./images/page3_5.png&&
&p class=&section page4&&
&p class = &list&&
&img src = &./images/page4_1.png&&
&img src = &./images/page4_2.png&&
&img src = &./images/page4_3.png&&
&img class = &text& src = &./images/page4_4.png&&
&img class = &bg& src = &./images/page4_5.png&&
&p id = &audioBox&&
&audio id = &audio& autoplay loop src= &./music/music.mp3&&&/audio&
&script type=&text/javascript&&
$(function(){
//1.fullpage
$(&.main&).fullpage({
sectionsColor: [&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;]
//2.控制音频的播放
var audioBox = document.getElementById(&#39;audioBox&#39;);
var audio = document.getElementById(&audio&);
audioBox.onclick = function(){
if(audio.paused){
audio.play();
audio.pause();
&/html&【相关推荐】1. 2. 3. 以上就是CSS3+fullPage.js实现全屏滚动效果代码的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
PHP开发工程师
文章总浏览数15:26 提问
fullpage做的PC端网页适配手机端的问题
fullpage的全屏滚动插件默认是不允许html和body出现滚动条的，现在PC端的网页想要适配在手机上，又不能缩放的太厉害，内容会很小看不清，理想方法时出现滚动条，让手机页面可以滑动滚动条看到网页全内容。但是貌似该插件禁掉滚动条手机上无法触发滚动效果。
如果在html和body上允许滚动条出现的话，PC端上每屏页面的横向滚动条会出现在页面最下方，可以用鼠标拖动，但是放在手机端，页面已经占满屏了，左右滑动无法触发横向滚动条的滚动效果（不知是不是每屏的内容里也不允许滚动条？），用chrome的手机模拟页面时可以通过鼠标滚轮的左右点击事件来触发横向滚动条，但是手机网页（safari）无法滑动。
请教大神，fullpage的网页在不想过度缩小页面的情况下，怎么允许用户通过滚动条来查看页面？
按赞数排序
里面提到了参数scrollBar和fitToSection，你相应的设置一下
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐
一、关于移动端兼容性
目前针对跨终端的方案，主要分为两大阵营：一套资源Vs两套资源。　　第一种是通过响应式或页面终端判断去实现一套资源适配所有终端；　　第二种是通过终端判断分别调取两套资源以适配所有终端。　　这两种思路我们并不能斩钉截铁的说哪一个更优选，正所谓”合适的才是最好的”。　　思路一:通过响应式或页面终端判断去实现一套资源适配所有终端　　优势：只需维护一套资源，维护成本较低。　　劣...
随着移动端的发展，手机端的页面应用越来越广泛，所以我们现在更多的是做移动端的页面。
但是我们同样要维持pc端，因此难免会遇到许多麻烦。
而且现在做移动端适配的方法也有好多种，针对不同的网站我们需要合理的判断，选择全适的方法；
第一种方法：整个页面宽高用px写死，让宽度自适应
这是最蠢的一个办法，但是实际上我们用得也挺多，它适用于一些页面结构比较复杂的网站。
我们只需要在头
由于@media 这一属性太复杂 所以在一般的公司网页制作中
我们可以直接根据浏览器窗口的大小来做自适应
var height = window.innerHeight ||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientH
var width = w
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。 于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 下面让木易设计来告诉大家。 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mo...
写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况：&style&div{width:400height:400border:1px solid #000; }img{width:100%;height:100%;}&/style&不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小。那是不是就这这么简...
随着互联网的快速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出现在我们的视野里，身为专业的web前端人员，还不学习新技术你就out啦！为什么这样说呢？因为响应式布局能同时兼容多个终端，比如（手机、平板、PC）做一个网站转眼间就可以变成3个网站，和现在相比是不是更加具有优势呢!
可能有些人对“什么是响应式布局”还不是很了解，下面就跟大家简单说下什么是响应式布局：
做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。1、最小尺寸分辨率（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度2、10...
目也pc端有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。
适配目标：
1.在不同分辨率的电脑上，网页可以正常显示
2.放大或者缩小屏幕，网页可以正常显示
对于宽度的适配
对于宽度适配：
首先设置html,body{width:100%;overflow-x:}
然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(
最近因为一些需要，做了h5相关的工作。发现在pc端浏览器和移动端浏览器上的效果大大不一样，总结如下适配经验，后面总结的继续在这里累加：1.点击事件的适配
首先，需要在head中添加&meta name=&viewport& content=&width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximu}