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

来源：CSDN

作者：唐大帅

转载时间：2019/7/17 16:08:12

说起手机网站的开发,最让新手脑大的问题，莫过于网站的自适应了。我当初也被这个问题困扰得抓耳挠腮，因此总结一些方法希望能帮到大家。

1、使用meta标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。是自适应的必需代码。
1

手机浏览器是把页面放在一个虚拟的”窗口”（viewport）中，通常这个虚拟的”窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

viewport标签及其属性：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>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
版权声明：本文为博主原创文章，转载请附上博文链接！

手机网站

求创资讯

本文内容为转载，如原作者有异议，请联系本站撤除。

下一篇：搜狐快站制作手机app网站后的真实感受

金山软件：金山云拟发行约5509万股D+系列优先股

【TechWeb】12月2日消息，金山软件发布公告称，于2019年12月2日，金山云集团与某个金山云股东、高级管理人员及中国互联网投资基金(有限合伙)订立购股协议，金山云(作为发行人)同意向中国互联网投资基金投资者发行约5509万股每股票面价值 0.001美元的D+系列优先可转换股份，代价为5000万美元。假设(i)金山云的所有优先股按1：1之转换比例悉数转换为金山云普通股；及(ii)购股权计划项下的所有股份及僱员持股计划（包括信託契据）项下保留以供发行的所有股份获发行，于完成购股协议项下拟进行交易后，金山云将由中国互联网投资基金投资者拥有约1.8868%，而本公司于金山云的股权将由49.1251%减少至48.1982%。金山云将仍为本公司附属公司。董事会进一步宣佈，于购股协议完成时或之前，金山云当时的所有股东将订立经重列股东协议，据此，D+系列优先股持有人有权于以下情况下要求金山云购买彼等持有的D+系列优先股：(i)D系列合资格公开发售未于特定期限内完成；(ii)金山云的任何B系列优先股持有人已根据经重列股东协议要求金山云购买其持有的B系列优先股；(iii)金山云的任何C系列优先股持有人已根据经重列股东协议要求金山云购买其持有的C系列优先股；或(iv)金山云的任何D系列优先股持有人已根据经重列股东协议要求金山云购买其持有的D系列优先股。金山云集团主要从事云技术的研发并提供相关服务。中国互联网投资基金投资者为于中国注册成立的有限合伙，主要从事互联网领域的股权投资。就董事作出一切合理查询后所深知、尽悉及确信，中国互联网投资基金投资者及其最终实益拥有人均为独立于本公司及其关连人士的第三方。

百度开始大范围打击快排，我们该如何应对

最近一段时间，大家发现很多网站关键词库和流量都在直线下滑，站长圈可以说是哀嚎遍野。即便是一些大站权重站，有些也难逃厄运。如上图所示，图中案例就是一个之前操作过快排而被惩罚的站点。其下场不可谓不悲壮。在这里我们先了解一下快排。现在的快排，主要分为两类：模拟点击;发包技术。其中模拟点击是租用大量的服务器和ip，在服务器上搭建一个模拟浏览器并使用脚本在浏览器上模拟用户的搜索行为，来提高页面在百度的评分。发包技术是直接伪造用户搜索浏览行为参数，直接将数据包post给百度，可以快速的将页面在百度的评分提高。发包技术中不乏上千指数大词3天上首页的案例。这种快排方式严重干扰了百度搜索的市场环境，因此百度在进行了打击快排灰度测试后，开始扩大算法应用范围，其结果就是如今的大量网站的关键词库像瀑布一样直线下降。既然算法已经来了，我们也只有选择原谅，哦不，是选择面对。百度打击快排，最主要的首段就是靠抓取快排的特征。其中发包快排的特征比模拟点击特征明显很多，因此如果您还要继续做快排，对于发包快排的供应商一定要慎重又慎重的选择。那么模拟点击就不会被打击吗?也一样会被打击。做模拟点击的作弊网站，有个很大的特征就是：有大量的词的点击率超过了50%甚至接近100%。这种极其不正常的现象，让百度也有了反击的方向。因此如果还要做模拟点击，就必须降低点击率。否则依然一抓一个死。当然，我在这里并不是提倡大家做快排，既然是快排，就有被惩罚的风险，靠白帽技术安心优化，为更多的用户提供搜索价值，百度自然会将您的网站排名提升上去，自然会将搜索流量像你倾斜。快排就像一杯毒药，你喝或者不喝，都是你的选择。既然百度开始打击了，我们就必须沉着的去面对。如果可以的话，现阶段不要去碰快排这个雷区，安心做优化，做内容，做外链，为真正的搜索用户做好服务，才是最好的选择。上图那样稳定的幸福，又有谁不想要呢?

三个月，日均指数1W5的关键词“垃圾分类”排名百度首页

SEO行业已经没落？渠成：耐特康赛的SEO仍在健康发展

如何修复浏览器中HTTPS“不安全”的问题？

中国移动开启IPv6改造工程第一批集采：华为、中兴、新华三等厂商在列

谷歌域名管理商公布报告实锤沙特盗播贝因体育

如何把网站从http转换成https

360站长平台推出一键切换https功能

“.手机”联合主办第三届中文域名创新应用论坛

域名行情风向标：持有这类域名的都笑了！

吸取芯片教训！中国域名根服务器诞生，美国网络霸权寿终正寝

木瓜移动营销课堂：社交平台与SEO其实相辅相成

中国高校IPv6升级成果初显，城市热点助力高校加快IPv6部署进程