報錯解決/簡單媒體查詢/動態載入css/橫豎屏判斷/html瀏覽器安全色性meta設定等小問題小知識__html

報錯：Ambiguous mapping found. Cannot map 'Controller' bean method

解決辦法：bean重複初始化，映射名重複，檢查@RequestMapping()中的映射名改掉

報錯：Expected one result (or null) to be returned by selectOne(), but found: 4

解決辦法：查詢返回多個值，要麼傳回值改為集合，要麼查詢返回單個值

簡單媒體查詢：

意思是沒超過320px時是設定前的樣式， 320-900px這一大塊背景是紅色 在這個範圍內當600-720px時背景色變成了藍色，900px以後又變成了設定前樣式 

也就是說320-600px：紅色；600-720px：藍色；720-900px：紅色；900px以後：設定前樣式

@media screen and (min-width:320px) and (max-width:900px){    body{    background-color:red;}}@media screen and (min-width:600px) and (max-width:720px){body{background-color:blue;}}

橫屏/豎屏判斷以及動作

@media all and (orientation : landscape) { /*橫屏時代碼*/} @media all and (orientation : portrait){ body{width:700px;height:800px;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);}} 

var mql = window.matchMedia('(orientation: portrait)'); console.log(mql); function handleOrientationChange(mql) {    if(mql.matches) {         console.log('portrait');  // 豎屏         alert("數");     }else {         console.log('landscape'); // 橫屏         alert("橫");     } } // 輸出當前螢幕模式 handleOrientationChange(mql); // 監聽螢幕模式變化 mql.addListener(handleOrientationChange);

html靜態布局瀏覽器安全色性meta設定

動態載入css以及js判斷手機端且 動態載入css

動態載入cssfunction includeLinkStyle(url) { var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; document.getElementsByTagName("head")[0].appendChild(link);}includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227");function IsPC(url) {    var userAgentInfo = navigator.userAgent;    var Agents = ["Android", "iPhone",                "SymbianOS", "Windows Phone",                "iPad", "iPod"];    var flag = true;    for (var v = 0; v < Agents.length; v++) {        if (userAgentInfo.indexOf(Agents[v]) > 0) {            flag = false;//手機端 var link=document.createElement("link");            link.rel="stylesheet";            link.type="text/css";            link.href=url;            document.getElementsByTagName("head")[0].appendChild(link);             break;        }else{            //pc端        }    }    return flag;}IsPC("../css/phonelogin.css"); var flag = IsPC(); //true為PC端，false為手機端

知識點比較零碎，用於解決一些常見的問題，後續會深入研究解決並補充，誰讓我們是最棒的呢。