自适应单页源码（自适应单页源码怎么设置）

qiaoqingyi 2023-04-08 628

默认

今天给各位分享自适应单页源码的知识，其中也会对自适应单页源码怎么设置进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、单页式网站的有什么优点？
2、iframe内嵌怎么自适应
3、写个CSS html 上传文件简单页面自适应移动端？
4、vue自适应pc端界面
5、自适应个人主页html源码，哪里下载？

单页式网站的有什么优点？

单页式网站优点：

一、着陆页更清爽

着陆页页面清爽是单页式网站最大的特点，它不会有各种各样的弹窗和各种各样的跳转，相比起多页式网站，按钮也会少很多。

当用户浏览过单页式网站之后，再浏览多页式网站或者是有弹窗的网站，会感觉到不适应。

二、操作更便捷

单页式网站在页面极简的情况下，单页式网站的操作也变得更加便捷，只要下滑和点击就好。尤其是下滑的操作体验，不需要页面跳转，想回去看上一个画面也不需要重新加载，只要滑回去就好了。

三、更利于移动端浏览

单页式网站对移动端的友好程度，直接体现在移动端浏览上。用手指就能完成滑动操作，想看那里滑到哪里，想回看就回看，想下滑就下滑真的不能更方便了。省去了页面跳转和重新加载的步骤，网站浏览的完成度会变得非常高。毕竟在着陆页上，多一次点击跳转的操作，会流失当前30%的用户，这个数据，只有单页式能够缩小到5%～15%。

四、源代码更优美

作为一个IT从业者，在看网站的时候都会习惯性地去看看源代码，如果一个网站的源代码比较优美整齐，单页式网站的源代码因为元素不多，所以源代码跟页面一样清爽，可以说是优美得内外兼修了。

五、上线更迅速

一个网站，在备案期间，是不能直接访问的，而多页面网站需要不断调试和修复Bug，而单页式网站制作好之后就可以直接发布了，因为元素少页面简洁Bug也更少更好修补。

六、收录更迅速

虽然说单页式网站的SEO相对比较麻烦，但是也不是不能做，今天我们只聊单页式的优点。收录迅速也是单页式的优点之一，当然，资深从业者都知道，收录不代表排名，排名需要SEO优化，但收录，只需要引擎的抓取。单页式网站被搜索引擎抓取，会比多页式快。

七、更酷的互动方式

因为单页式网站，是可以直接添加表单的，表单的形式也非常简单，用户填写自己的姓名、联系方式和留言后，网站后台会收到这条留言，并且可以直接一对一地跟客户进行沟通和联系!

八、改版更方便

与多页式的改版相比，单页式的改版实在太简单了。如果是用建站平台做的单页式网站，直接模板替换图片更换色彩调整、文案变更就搞定了一次改版。如果说多页式的改版会让攻城狮感觉内心颤抖，那么单页式的改版不仅不会让攻城狮感觉痛苦甚至会有点轻松想笑。

九、自适应更流畅

在移动端流量成为巨头的今天，如果还只做PC端网页，那就太失败了。SEO都进化到优化app和微信搜索了，网站的建设再不考虑到移动端的自适应就真的太落后了。在当下，一个好的网站，需要PC端好看，手机端好看，pad端也要好看，如果一端一个网站版本，工作量巨大，还不一定能做到内容风格的统一，不如自适应。而单页式网站，仿佛天生为自适应而生，做好一个单页式，任何尺寸的屏幕打开都会很好看。

十、用户留存率和浏览完成度更高

单页式网站最棒的一点，也是它能成为网站圈后起之秀的主要原因，是因为它的用户留存率非常高。首先是从浏览用户留存来说，有关统计显示，多页式网站每一次点击跳转就会流失当前30%的用户，单页式网站首先就规避掉了这个风险。其次是从网页浏览完成度来说，单页式网站一拉到底的浏览方式，也比多页式跳转、加载的浏览方式更高哦。单页式网站，用户很容易浏览完整个网站，但多页式，一个个页面加载，用户的耐心也就在一次次跳转中逐渐消失了。

iframe内嵌怎么自适应

什么是自适应高度吧。所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。

顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。

传统做法大致有两个：

方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。

方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。

在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。

如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单最方便的传统处理方式：

iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"/iframe

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。

如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。

Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

主页面代码示例：

iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"/iframescript type="text/javascript"

function reinitIframe(){

var iframe = document.getElementById("frame_content");

try{

iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

/script

一直执行，效率会不会有问题？

我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。

下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。

!DOCTYPE HTML PUBLIC "

在主页面追加以下测试代码，以输出这两个值，代码示例：

divbutton onclick="checkHeight()"Check Height/button/divscript type="text/javascript"

function checkHeight() {

var iframe = document.getElementById("frame_content");

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

alert("bHeight:" + bHeight + ", dHeight:" + dHeight);

}

/script

被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：

divbutton onclick="toggleOverlay()"Toggle Overlay/button

/div

div style="height:160px;position:relative"

div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"/div

/div

script type="text/javascript"

function toggleOverlay() {

var overlay = document.getElementById('overlay');

overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';

}

/script

下面列出以上代码在各浏览器的测试值：

（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值）

层隐藏时

层展开时

bHeight

dHeight

bHeight

dHeight

IE6 184 184 184 303

IE7 184 184 184 303

FF 184 184 184 303

Opera 181 181 300 300

Safari 184 184 303 184

暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。

但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：

function reinitIframe(){var iframe = document.getElementById("frame_content");

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;

}catch (ex){}

}

window.setInterval("reinitIframe()", 200);

这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。

如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。

可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 onload=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。

这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。

在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。

这是最终的主页面的代码：

iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"/iframe

script type="text/javascript"

function reinitIframe(){

var iframe = document.getElementById("frame_content");

try{

var bHeight = iframe.contentWindow.document.body.scrollHeight;

var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

var height = Math.max(bHeight, dHeight);

iframe.height = height;