wordpress网站做响应式布局的几个方案

响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当凭证用户行为以及装备环境(系统平台、屏幕尺寸、屏幕定向等)举行响应的响应和调整。详细的实践方式由多方面组成,包罗弹性网格和结构、图片、CSS media query的使用等。无论用户正在使用条记本照样iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关剧本功效等,以顺应差异装备;换句话说,页面应该有能力去自动响应用户的装备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不停到来的新装备做专门的版本设计和开发了。

移动互联网已是现在网名上网的主流,越来越多的人通过手机上网来查看信息,以是,若是用wordpress做网站,移动端的网页效果就不得不思量进去。许多大站都是PC和移动离开做的,如:新浪、腾讯等这样的门户站。这种星散方案,是可取的,不外,对于wordpress做成的小站来说,就没有需要这么庞大地做2套模板,我们完全可以通过响应式结构,让网页在多个终端上都能正常显示。

在已往的几年里,许多响应模板,CSS框架和WordPress主题如雨后春笋般涌现。下面就提供几套wordpress网站响应式结构的方案。

方案一:多个CSS文件

就是为差其余终端确立差其余CSS文件。主要是在网页的head头加入判断屏幕宽度的代码,如下:

  1. <link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 320px)">
  2. <link rel="stylesheet" type="text/css" href="style2.css"  media="screen and (min-width: 320px) and (max-width: 400px)">

上面代码第一句意思是:当屏幕宽度是320px以内时,就挪用style1.css这个样式。第二句的意思是:当屏幕宽度是320~400之间时,就挪用style2.css这个样式文件。

方案二:只用1个CSS文件

所有终端只用一个CSS文件来实例响应式结构。对差异宽度的判断放到这个CSS文件中,如下:

  1. @media screen and  (max-width: 320px) {
  2. html { font-size:14px;}
  3. }
  4. @media  screen and (min-width: 320px) and (max-width: 440px) {
  5. html { font-size: 16px;}
  6. }

上面的代码意思是:当屏幕是320px宽度时,html的字体巨细是14px;当屏幕宽度是320~440之间时,字体巨细是16px。

方案三:JS+rem实现响应式

要求CSS文件中的巨细单元为rem,然后通过JS代码来凭证差其余屏幕宽度更改网页块等元素的巨细。JS代码如下:

  1. (function(win,doc){
  2. var oContainer=doc.getElementById('container'); /* 获取页面主体最大元素 */
  3. var oHtml=doc.getElementsByTagName('html')[0]; /* 获取 html 元素 */
  4. fnResetHtmlFontSize();
  5. function fnResetHtmlFontSize(){ /* 缩放函数 */
  6. var iContainerWidth=oContainer.offsetWidth; /* 获取主体在当前手机浏览器的宽度 */
  7. oHtml.style.fontSize=iContainerWidth/10+'px'; /* 设置根元素字体巨细 = 主体宽度 / 10 */
  8. }
  9. win.addEventListener('resize',fnResetHtmlFontSize,false); /* 当屏幕宽度发生转变时,执行缩放函数 */
  10. })(window,document);

这种方案的优点是:不需要在头部和CSS文件中做屏幕判断了,CSS文件相对来说,代码会少许多,不需要凭证差其余宽度来设置DIV等元素的差其余巨细了。瑕玷是:若是浏览器禁用了JS,响应式就会失去效果。

先容了这3种wordpress网站响应式结构方案,可以凭证自己网站的情形选择适合自己的。不管哪一种都可以让你的网站在差其余终端上都可以到达理想的显示效果。小我私人对照推许第3种方案,可以省去很多多少代码。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 wordpress网站做响应式布局的几个方案 https://zhutizhen.com/14658.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章