【外掛】自適應佈局JQuery外掛，rem佈局——和派孔明

阿新 • • 發佈：2018-12-23

//框架檔名Pandora.AutoSize.js
(function($) {
    $.fn.extend({
        AutoSize: function() {
            var element = $(this);
            auto();
            function auto() {
                var width = $(window).width(),
                    height = $(window).height();
                $("html").css("font-size" 
, width / 15);
                $(element).width(width).height(height);
            };
            $(window).resize(auto);
        }
    });
})(jQuery);

//用法
引入<script src="jquery-1.4.2.min.js"></script>
<script src="Pandora.AutoSize.js"></script>

//呼叫外掛
<script>
$(function() 
{
    $("body").AutoSize();
    })
</script>


//640/15=42.66666666666667
//px換算公式為畫素除以42.66666666666667=rem
//例如:width:200px=200/42.66=4.688232536333802rem;

//demo案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" 
 />
<style>
/*rem換算前*/
/*
*{margin:0;padding: 0;list-style:none;}
.div1{width:595px;height:30px;margin:0 auto;}
.div1 ul li{float:left;height:30px;border-left:1px solid #fff;text-align:center;background:#ccc;line-height:30px;font-size:16px;}
.div1 ul li a{text-decoration:none;color:#fff;display:block;padding:0px 43px;}
.div1 ul li a:hover{background:#666;}
*/

/*rem換算後*/
*{margin:0;padding: 0;list-style:none;}
.div1{width:13.94749179559306rem;height:0.7032348804500703rem;margin:0 auto;}
.div1 ul li{float:left;height:0.7032348804500703rem;border-left:1px solid #fff;text-align:center;background:#ccc;line-height:0.7032348804500703rem;font-size:0.7032348804500703rem;}
.div1 ul li a{text-decoration:none;color:#fff;display:block;padding:0px 1.007969995311767rem;}
.div1 ul li a:hover{background:#666;}
</style>
<script src="jquery-1.4.2.min.js"></script>
<script src="Pandora.AutoSize.min.js"></script>
<script>
$(function(){
    $("body").AutoSize();
    })
</script>
<title>demo</title>
</head>
<body style="margin:0; padding:0;">
<div class="div1">
    <ul>
        <li><a href="javascript:;">首頁</a></li>
        <li><a href="javascript:;">介紹</a></li>
        <li><a href="javascript:;">中心</a></li>
        <li><a href="javascript:;">關於</a></li>
    </ul>
</div>
</body>
</html>

【外掛】自適應佈局JQuery外掛，rem佈局——和派孔明

//框架檔名Pandora.AutoSize.js (function($) { $.fn.extend({ AutoSize: function() {

洛谷 4525 && 洛谷 4526 【模板】自適應辛普森法

題目：https://www.luogu.org/problemnew/show/P4525 　　　https://www.luogu.org/problemnew/show/P4526 參考：https://blog.csdn.net/VictoryCzt/article/details/8066011

【pytorch】自定義讀取資料集，使用txt文字

使用txt文字讀入資料可以減少記憶體的需要，有時候自定義載入資料集是非常必要的，我下面的程式碼是針對影象的，並且帶有label的有監督的影象。先看程式碼： import numpy as np import os import torch.nn as nn from PIL import Ima

【Highchart】自定義儀表盤配置檔案，儀表盤分段及漸變色

highchart配置出儀表盤 chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWi

手機端頁面自適應最簡單解決方案—rem佈局

原文連結：http://caibaojian.com/rem-responsive-2.html 使用rem實現自適應佈局，應該算是當前移動前端的一大趨勢，有些人對此還有點迷惑，搞不懂rem是如何實現自適應佈局，如何根據設計稿來調整rem的值？rem佈局如何用雪碧背景圖片？rem一定要載入js嗎？rem的根

【python3】用apache2部署django專案，成功案例和問題集錦

正常部署的過程是按照自強學院的，接近官方，這裡註明，在蒐集資訊階段需要注意資訊源頭的加權，找最可靠的，事半功倍；CSDN上看了很多都不行，最後找官方文件的時候，搜到了下邊這個附一個我專案的目錄結構（放在/home下了）： | mysite

【Java】i++與++i的不同，從底層和效率上比較

以前書本、視訊和網站上但到i++和++i的區別，都是簡單，兩句話。 i++，先運算，後賦值 ++i，先賦值，後運算舉個例子：（Java語言） int i = 1; System.out.print(i++); int j

【修真院WEB小課堂】自適應最小螢幕時，該如何佈局。

自適應小螢幕裝置時，該如何佈局？分享人：宜康1.背景介紹隨著科技的發達，使用移動裝置諸如手機平板等獲取資訊，社交的人越來越多。如何在螢幕大小不同的物理裝置上獲得類似的使用體驗呢？很多網站的做法是為不同大小的物理裝置提供不同的網頁。但是這樣做很麻煩，需要維護多個版本，不夠方便

【AndroidStudio】自定義gradle外掛：無需釋出，僅用於當前專案

最近由於工作需要，想要做個gradle外掛輔助一下，各種難易程度的講解文章也看了不少，腦子裡的資訊比較亂，在這抽個時間整理一下。因為是最近剛接觸gradle外掛的製作，剛開始除錯的時候構造的是可釋出的外掛模組，每次修改都得重新發布到本地，麻煩死了~ 在這裡提供一個免釋出

10.【轉】Visual Studio Code 必備外掛，主題及語法提示

原文地址：http://www.css88.com/archives/8064 小編推薦：掘金是一個面向程式設計師的高質量技術社群，從一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。 Visual Studio Code 是由微軟開發的一款免

【電腦科學】【2018.02】自適應運動規劃

本文為美國卡內基·梅隆大學（作者：Sanjiban Choudhury）的博士論文，共255頁。移動機器人正越來越多地被部署在現實世界中，以適應諸如運輸、配送和檢查等應用的不斷增長需求。移動機器人的運動規劃系統在它們所遇到的各種場景中都應該具有一致的效能。儘管可以使用具有可證明的

【Mybatis】Mybatis generator自動生成外掛如何修改Mapper.xml 的名稱空間namespace

這也是在擴充套件 Mybatis generator 的時候遇到的問題，記錄一下；在上一篇文章如何繼承Mybatis中的Mapper.xml檔案很重要的一點就是要讓兩個Mapper.xml檔案的名稱空間相同，這樣才能夠實現繼承；那麼既然是自動生成外掛，在生成原始 Mapper.x

DataTables外掛-高度自適應

應用不同顯示器的解析度不一樣，導致顯示效果不一致。很多情況下，在該解析度下顯示適合，在其它顯示器顯示過大或過小。如何調至更好的使用者體驗？這是一門比較耗時的功課。本篇文章應用範圍很窄，只講DataTable外掛的高度自適應。在不同的解析度下，儘可能地將表單資料更好的顯示出來。實現利

編寫自定義的JQuery外掛的幾個注意點

前言在巨人的肩膀上做事，不出意外的外，你會站的高看得遠！外掛是對功能的封裝，自定義的外掛來擴充套件jQuery，不僅可以促進程式碼的特定風格，而且可以利用jQuery的提供的豐富API，何樂而不為！一，擴充套件jQuery的形式在$（jQue

【工具】分享自用的Burp外掛

Burp Suite常用外掛說明一、sqlmap外掛使用sqlmap.jar可以在測試時通過右鍵選單快速把當前測試資料包進行SQLMAP測試二、hackebar外掛使用HackBar.jar可以在Burp中使用hackebar功能，具體功能

【eclipse】eclipse：安裝testNG外掛

目錄一、線上安裝【推薦】二、離線安裝（一）方法一、離線解壓安裝法（二）方法二、離線不解壓安裝法【推薦】一、線上安裝【推薦】（1）開啟eclipse-->選中專案-->幫助-->安裝新軟體：（2）新增-->“名稱”

HTML自適應字號JS外掛

背景之前在專案中有遇到需要根據獲取文字的長度自適應顯示文字的需求，整理髮現這種需求在專案中多次遇到，所以考慮編寫一個通過的js外掛來實現。使用使用時只需要指定dom元素的寬度和高度，外掛會自動計算

【win10】Sublime Text3安裝SublimeREPL外掛以及快捷鍵設定

1、安裝SublimeREPL 手動安裝，在github上面下載，然後放到下面的資料夾裡面就可以： 2、配置快捷鍵之前在網站上面看了很多教程，發現都無法繫結快捷鍵，按了f5沒有任何反應。後面我修改了一下就可以成功綁定了：（不知道修改原理，勿噴）在剛剛的

【bootstrapValidator】bootstrapValidator對隱藏域驗證，外掛不能捕獲“程式賦值事件”解決方案

1. 賦值之後觸發一次“change”事件 //bootstrapValidator這個外掛不能捕獲這樣的“程式賦值事件”，所以這裡不能達到驗證的效果。 //解決辦法：賦值之後觸發一次“change”事件 $("#result").val(result).change(); 2.e

【IDEA】IntelliJ IDEA程式碼特效外掛-螢幕抖動和顆粒效果

之前用atom的時候，發現atom上的一個外掛在寫程式碼的時候很酷炫，就安裝了用了用。也就是activate-power-mode atom package ，這個直接在atom上搜索安裝即可但是沒辦法，用atom開發JavaWeb專案肯定是不太方便

【外掛】自適應佈局JQuery外掛，rem佈局——和派孔明

相關推薦