如何解决手机网站的自适应问题

说起手机网站的开发,最让新手脑大的问题，莫过于网站的自适应了。我当初也被这个问题   困扰得抓耳挠腮，因此总结一些方法希望能帮到大家。
1、使用meta标签：viewport
H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。
viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。是自适应的必需代码。
1
手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
viewport标签及其属性：
1
每个属性的详细介绍：
2、使用媒体查询
媒体查询是在css3中为解决自适应问题，提供的解决方法。其原理是，在不同的屏幕尺寸使用不同的css样式。
1
例如：
@media only screen and (max-width: 640px) {
  body {
      font-size：100px；
  }
}12345
3、尽量使用百分比
对图片或者段落都使用百分比，因为body的默认宽度是屏幕尺寸，都可以根据其父元素，设置百分比。
1
4.使用css3单位rem
rem是CSS3新增的一个相对单位（root em，根em）,指的是相对于HTML根元素的字体大小。默认html的font-size是16px，即1rem=16px。
1
通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
聪明的程序猿，看到这一功能，发现了进化的机会。于是通过js动态获取屏幕宽度，设置html的font-size值，即可控制rem单位缩放，即可达到页面整体适应的效果.
js代码:
!(function(win, doc){
  function setFontSize() {
      // 获取window 宽度
      var docEl = doc.documentElement;
      var winWidth = docEl.clientWidth;
     if(winWidth<=640){
      doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;}
      else{
          docEl.style.fontSize=100+"px";
          }
  }
  var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
  var timer = null;
  win.addEventListener(evt, function () {
      setFontSize();
  }, false);
  win.addEventListener("pageshow", function(e) {
      setFontSize();
  }, false);
  // 初始化
  setFontSize();
}(window, document));12345678910111213141516171819202122232425262728
除了上面的方法，类似的方法还有使用响应式框架boostrap，使用em单位等，但就效果和便利程度而言，优先推荐使用rem单位和相应的js，实现移动页面的自适应。
---------------------
作者：唐大帅
来源：CSDN
原文：https://blog.csdn.net/voke_/article/details/78433505
版权声明：本文为博主原创文章，转载请附上博文链接！

分享题目：如何解决手机网站的自适应问题
分享地址：https://www.cdcxhl.com/news/116723.html

成都网站建设公司_创新互联，为您提供外贸建站、搜索引擎优化、关键词优化、网站设计公司、ChatGPT、自适应网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联