在手机移动端和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. linux操作目录命令之mkdir与rmdir

    一.mkdir  创建目录(一个或多个目录) mkdir -m 777 -p path 1)-m  对新建目录设置权限 2)-p  可以是一个路径名称.此时若路径的某一级目录尚不存在,使有该选项后系统 ...

  2. 选择vim编辑器的7个理由

    当我刚刚开始用 vi 文本编辑器的时候,我讨厌它!我认为这是有史以来设计上最痛苦和反人类的编辑器.但我还是决定我必须学会它,因为如果你使用的是 Unix,vi 无处不在并且是唯一一个保证你可以使用的编 ...

  3. Tensorflow视频教程&Pytorch视频教程

    基于tensorflow做研究和基于pytorch做研究哪个好?哪个更容易复制代码,工业上更易用.Keras和tensorflow.pytorch的关系. Keras:Keras是一个由Python编 ...

  4. 论文阅读:FlexGate: High-performance Heterogeneous Gateway in Data Centers

    摘要: 大型数据中心通过边界上的网关对每个传入的数据包执行一系列的网络功能,例如,ACL被部署来阻止不合格的流量,而速率限制被用于防止供应商过度使用带宽,但是由于流量的规模巨大,给网关的设计和部署带来 ...

  5. 虚树总结&题单&简要题解

    简介 虚树,即剔除所有无关结点,只保留询问点和询问点的相关结点(两两之间的LCA),建一棵新树,这棵新树就是虚树.通过虚树,可以有效的减小询问(甚至修改)的复杂度.设询问点的个数是\(k\),那么建虚 ...

  6. HDU1254--推箱子(BFS+DFS)

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s) ...

  7. 1.8 全新日期api

    /** * * @note * @author zhouyy <br> * Apr 14, 2017 5:21:12 PM * @version */ package com.bytter ...

  8. wannalfy 挑战赛7 F Masha与老鼠(贪心+dp)

    链接:https://www.nowcoder.net/acm/contest/56/F   时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K 6 ...

  9. maven 私服的setting.xml配置

    <?xml version="1.0" encoding="UTF-8"?> 2 <settings xmlns="http://m ...

  10. oracle 查看并行sql语句的并行数量和如何开并行

    1.执行sql:select /*+ parallel(a,4) */ * from tf_f_user a where rownum<100000; 2.如何查看该sql语句的并行数量: se ...