在手机移动端和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. vue学习-day05 -- 案例:名字合并(监听data数据的改变)

    1.案例:名字合并(监听data数据的改变) 使用keyup事件监听data数据的改变 <!DOCTYPE html> <html> <head> <titl ...

  2. eclipse在线安装ermaster插件

    eclipse在线安装ermaster插件: https://www.jianshu.com/p/449fbcd9141a ERMaster的安装和使用 https://www.cnblogs.com ...

  3. android存储路径问题

    关于存储路径问题,如果是想要存储在应用本身的路径下,如果该应用卸载的时候,对应文件随之卸载, 如果使用的是android level 8以上的版本,采用的是: getExternalFilesDir( ...

  4. git 配置 https和ssh 免密码登录 常用操作命令

    git 配置 https和ssh 免密码登录 一. 区分https clone 和 ssh clone 不同的克隆方式导致校验方式不同,对应的免秘方式也不一样. https通过记住账号密码免登,ssh ...

  5. php GD库简单使用和封装

    GD库创建图像步骤 <?php //1.创建画布 $width = 300; $height= 200; $image=imagecreatetruecolor($width,$height); ...

  6. db2缓冲池调优

    缓存池: 冲池是内存中的一块区域,db2会将用到数据放到缓冲池中提高性能.缓冲池太小,每次查询仍然要到磁盘中操作,达不到缓冲的效果.缓冲池太大,超出操作系统管理的限制,会导致数据库无法连接的错误. 缓 ...

  7. 电脑出现了一块tap window adapter v9 网卡 以及虚拟机桥接模式无法通信原因

    计算机与外界局域网的连接是通过主机箱内插入一块网络接口板(或者是在笔记本电脑中插入一块PCMCIA卡).网络接口板又称为通信适配器或网络适配器(network adapter)或网络接口卡NIC(Ne ...

  8. Python基本语法_文件操作_读写函数详解

    目录 目录 软件环境 file文件对象 open文件操作 读文件 read读取所有文件内容 readline获取一行内容 readlines读取所有文件内容 readreadlinereadlines ...

  9. laradock 部署 php 环境 和 laravel/lumen 框架

    环境是windows 10 版本1809,docker 版本18.09.0 首先是下载docker.git, 具体可以参考 http://laradock.io/ 要求 Docker >= 17 ...

  10. vue--路由嵌套

    路由嵌套的SPA实现的步骤: A(/a)组件需要嵌套B组件(/b)和C组件(/c) ①准备嵌套其它组价的父组件 指定一个容器在A组件指定一个容器<router-view></rout ...