在手机移动端和PC端控制居中是一个很蛋痛的问题,因为屏幕宽度在变化,所以就不要写死样式,那么我想用JS来控制,灵活的控制宽度,需要注意这三个时候:

(1)首先需要在页面刚加载的时候就调用此函数,

(2)屏幕在变化的时候,即onresize也需要调用

(3)自己要写出这个函数出来

$(function(){
loginCenter();
$(".loginCodeInput").val("").focus();

$(".loginCodeInput").bind("input", function() {
$(".loginError").hide();
});

$(".loginButton").click(onLoginButtonClick);

$(".projectTitleReturn").click(onProjectTitleReturnClick);
$(".projectTitleDetail").click(onProjectTitleDetailClick);

$(".itemTitleReturn").click(onItemTitleReturnClick);
});

$(window).resize(function(){
loginCenter();
});

function loginCenter(){
var windowWidth = $(window).width();
var marginLeft = (windowWidth - $(".center").width()) / 2;
$(".center").css("margin-left", marginLeft);
}

如何使用js在移动端和PC端居中的更多相关文章

  1. js判断游览器是移动端还是PC端

    js判断网页游览器是移动端还是PC端 <script type="text/javascript"> function browserRedirect() { var ...

  2. js判断是移动端还是pc端

    运行页面的时候,执行到js会判断来自于移动端还是pc端,如果是移动端则跳转制定链接地址,这样在手机端会有额外的不必要浪费的加载时间 var browser={ versions:function(){ ...

  3. js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结

    1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...

  4. js判断移动端还是PC端

    function isMobile(){ var sUserAgent= navigator.userAgent.toLowerCase(), bIsIpad= sUserAgent.match(/i ...

  5. JS 判断移动端与PC端

    js判断移动端与pc端   这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...

  6. JS判断移动端还是PC端(改造自腾讯网) 仅用于宣传动画,下载页等

    JS判断移动端还是PC端(改造自腾讯网 http://www.qq.com/) 本脚本仅用于宣传动画,下载页( ipad 也算pc端)等,  ionic 用 ionic.platform 即可( io ...

  7. JS判断android ios系统 PC端和移动端

    最近公司上线移动端,需要根据不同的系统跳转到不同的产品页面,百度后发现这一段代码很好用,不但可以判断当前是什么系统,还能知道当前浏览器是什么内核,移动端PC端都已测试无问题! var browser ...

  8. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

  9. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

随机推荐

  1. 2018山东省赛 E Sequence ( 思维 )

    题目链接 题意 : 给出一个排列,让你删除一个数,使得删除后整个序列的 Good 数数量最多.Good 数的定义为 若 Ai 为 Good 则存在 Aj < Ai ( j < i ) 分析 ...

  2. Sublime Text 3 程序运行后中文显示乱码的解决方案

    问题描述: 问题分析: 新建python文件,输入下面代码,测试发现发送给python解释器时,默认为cp936的编码方式,而py文件为UTF-8的编码方式,cp936和UTF-8的编码方式对于英文字 ...

  3. GAN one-shot

    基于one-shot的GAN生成图片 GAN的学习资料用于数据增广GAN的调研: https://zhuanlan.zhihu.com/p/32103958 GAN的各种paper汇集(包括Gener ...

  4. JMS学习十(ActiveMQ支持的传输协议)

    ActiveMQ提供了一种连接机制,这种连接机制使用传输连接器(TransportConnector)实现客户端与代理(client - to - broker)之间的通信. 网络连接器(networ ...

  5. Spring Boot教程(三)消费Restful的web服务

    构架工程 创建一个springboot工程,去消费RESTFUL的服务.这个服务是 http:///gturnquist-quoters.cfapps.io/api/random ,它会随机返回Jso ...

  6. mysqli使用localhost问题

    <?php $mysqli = new mysqli('localhost', 'root', '123456', 'mysql'); if ($mysqli->connect_error ...

  7. 项目三、文件上传器v1.1

    /** * 自定义文件上传工具 v1.1 * @param url 路径 */ function fileUploader(url) { var _date = new Date(); //日期 th ...

  8. AAAI 2019 分析

    AAAI 2019 分析 Google Scholar 订阅 CoKE : Word Sense Induction Using Contextualized Knowledge Embeddings ...

  9. 我写过的bug...

    添加对,更新和查询出错 因为只写了bean里只写了se't方法,没有写get 多条件联合查询,后一个条件没用 写xml里面复制上一行,忘记把变量名改了(propertyValue没改成register ...

  10. Linux_OpenSSH远程连接

    目录 目录 SSH server SSH服务属性 SSH协议执行原理 SSH连接方式 ssh Commands scp commands sftp commands SSH在生产环境中的使用 系统间备 ...