html+css手机端自适应网页
一,最近在做项目,写移动端的网页,主要是自适应的问题。bootstrap等前端框架用的不好,又不想耽误时间,不能自适应很烦人,这里给大家介绍下我的方法,
也是结合了很多人的思路。
1.在头部加入这样的一行代码:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
这句话是自动设置缩放,然而,它并不能完全适应所有的手机,并且你在用浏览器手机模式调试的时候可能正常,但是换到真实的手机端其实是不正常的。所以我们还要进行改动。
2.这里推荐大家在用magin,padding,font-size,等属性的时候用rem替代px,你可能对rem比较陌生,这里我提供好了一段js代码,直接引入即可,不需要纠结rem是怎么回事,关于原理,我再写篇博客做介绍,这篇博客讲怎么使用。就是以下的这段js代码,再写网页的时候放入html中即可。下面代码中的640指的是手机的屏幕宽度,一般来讲市面上的手机屏幕的宽度最大是640px,所以这里用i=640指代屏幕的最大宽度,最小是320px,然后通过引用下面的js你就可以书写自己的网页了,要记得本js的1rem=100px哦,其实是为了好换算,比如font_size:14px;我们就可以写成,font_size:0.14rem。
<script>
!function(n) {
var e = n.document,
t = e.documentElement,
i = 640,
d = i / 100,
o = "orientationchange" in n ? "orientationchange": "resize",
a = function() {
var n = t.clientWidth || 320;
n > 640 && (n = 640),
t.style.fontSize = n / d + "px"
};
e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
} (window);
</script>
3.好了,接下来为大家展示一个轮播图效果来说明一下,先上代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>无标题文档</title>
<script src="data:images/jquery-1.js"></script>
<script src="data:images/TouchSlide.js"></script>
<script src="data:images/rem.js"></script>
<style>
/* banner 轮播切换 star */
body{margin:0 auto !important;max-width:640px;min-width:320px;background: #fff !important;overflow-x: hidden;}
#banner{position: relative;}
#banner .hd{position: absolute;width: 100%;text-align: center;bottom: 2%;left: 0;}
#banner .hd li{width: 0.2rem;height: 0.2rem;border:1px solid #fff;border-radius: 50%;display: inline-block;margin:0 4px;}
#banner .hd li.on{background: #9e5fd4;border-color:#9e5fd4; }
</style>
<script type="text/javascript">
$(function(){
/*根据banner个数增加下方指示点*/
n=$(".ibanner .bd li").size();
for (m=0;m<n;m++){
$('.ibanner .hd').append('<li></li>');
}
/*banner切换*/
if($('.ibanner').length){
TouchSlide({slideCell: "#banner",mainCell: ".bd",autoPlay: true,effect: "leftLoop",interTime:5000});
}
});
</script>
</head>
<body>
<!-- 上部轮播开始-->
<div id="banner" class="ibanner">
<div class="tempWrap" style="overflow:hidden; position:relative;">
<ul class="bd" style="width: 3840px; position: relative; overflow: hidden; padding: 0px; margin: 0px; transition-duration: 200ms; transform: translateX(-2560px);">
<!-- 此处添加伦比图片-->
<li style="display: table-cell; vertical-align: top; width: 640px;"><a href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img src="data:images/banner11.jpg"></a></li>
<li style="display: table-cell; vertical-align: top; width: 640px;"><a href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img src="data:images/banner12.jpg"></a></li>
<li style="display: table-cell; vertical-align: top; width: 640px;"><a href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img src="data:images/banner13.jpg"></a></li>
<li style="display: table-cell; vertical-align: top; width: 640px;"><a href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img src="data:images/banner14.jpg"></a></li>
<li style="display: table-cell; vertical-align: top; width: 640px;"><a href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470"><img src="data:images/banner15.jpg"></a></li>
</ul>
</div>
<ul class="hd">
</ul>
</div>
<!-- 上部轮播结束-->
</body>
</html>
效果图如下所示
4.由于以上代码设计到了三个js,就是我前边提到的rem,自适应等,所以,我把这个效果分享一个百度网盘吧,其实前边的步骤有介绍的,按要求来就行,但是顾及一下新手吧,我发个报读网盘链接链接:https://pan.baidu.com/s/1hCdjn6uvRjWOgUBTpfmqTg 密码:be8a
html+css手机端自适应网页相关推荐
- 静态网页 手机端自适应
浏览器打开的网页,页面做手机端自适应以及引入vue和ant-design html <!DOCTYPE html> <html lang="en"> < ...
- 前端切图:手机端自适应布局demo
手机端自适应布局demo 原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html><head><met ...
- 手机端访问网页自动跳转至广告页面解决办法
手机端访问网页自动跳转到垃圾界面的解决办法 这几天用手机访问网页频频出现弹出垃圾界面和广告的情况,令人愤怒不已,由于界面过于恶心,这里就不展示了- 今天就是总结一下怎么屏蔽这些广告界面和错误界面 HT ...
- 手机端自适应响应式框架,移动端响应式布局代码
开拓眼界的方式有两种,一是读书,二是花钱.读书,花最少的钱买别人的财富,你把孙子兵法背下来,孙子便跟你一辈子.花钱,行万里路,阅人无数,毕竟对于人生来说,任何经验都是有用的. 那,既然没有钱,就好好读 ...
- 关于pc手机端自适应开发的一些记录
一.pc端.手机端开发的区别 1.兼容性 1⃣️pc需要注意各个浏览器的兼容性,主要有谷歌.火狐.qq.uc.opera.ie.360等等.浏览器的内核不同,对不同css的展示效果不一致.(这里需要去 ...
- 手机端自适应遇到的问题 页面缩放不正常(使用的是flexible.js)
o(╥﹏╥)o.... 做了一个项目 包含pc端和手机端,手机端要自适应,用了淘宝的小插件flexible.js,然后页面的缩放出现了问题,算出来的dpr都是对的,但是字体大小始终不对,(现在这个图 ...
- 在html中写响应式布局的代码,手机端自适应响应式框架,移动端响应式布局代码...
移动端自适应框架,响应式布局,如何实现移动端不同分辨率的手机?在本文能够详解,响应式布局是HTML5和css的结合是必然,但是很多朋友不知道怎么实现不同分辨率下的手机端,自适应框架在本站也有,但是具体 ...
- 手机端静态网页制作需要注意的几个问题
在手机端(移动端)进行静态网页的制作,主要考虑不同手机兼容性的问题,需要达到在不同类型的手机上,网页都能有一个良好的展示效果.为了达到这个效果,我们在写静态网页时需要注意几个问题. 1 viewpor ...
- CSS手机端的主界面
开发工具与关键技术:VS/C# 作者:龙文浩 撰写时间:2019/07/17 基于CSS的手机端的页面,见截图: 首先,用大的div盒子包裹住里面八个小的div盒子,分别为"文本框" ...
最新文章
- 2022-2028年中国食品电商行业投资分析及前景预测报告
- 【进大厂大数据爬虫技术核心难点】纯前端开发的爬虫程序,很多BAT技术大咖都为之惊叹
- 以太坊智能合约函数参数ABI编码,动态类型string编码,函数参数的ABI编码, 含c++代码
- 华为AR28-31配置光纤接入
- 什么是防火墙,真正意义上的防火墙
- Java中break、Continue、reutrn总结
- FSAF目标检测2019
- 验证Linux主机是否支持RDMA
- ROS Gazebo(五):ros_control和gazebo仿真总结
- 1008 Elevator (20 分)【难度: 简单 / 知识点: 模拟】
- linux date字符串日期格式,Linux中date用法
- 六款值得推荐的Android开源框架简介
- mac nginx php7 配置,mac os下配置nginx+php7.1+fastcgi
- Keil5的仿真调试
- 理解 CSS 布局和块级格式上下文 1
- 超赞 ! 老外的一种避免递归查询所有子部门的树数据表设计与实现!
- 关于命令行启动MySQL服务的相关问题
- 2016-4-18 ICMPv6协议[RFC2463]--报文详解
- VMware项目虚拟机IP修改说明
- linux触摸屏应用程序开发,linux触摸屏(一)编写触摸屏应用