移動端rem布局背景圖片使用以及sprite雪碧圖
現在移動端頁面用rem布局已經是一大流派了，成熟的框架如淘寶的flexiable.js，墨塵寫的更輕量級的hotcss。用rem作單位使得元素能夠自適應后，還有一塊需要關注的，那就是背景圖片。 rem布局 所謂rem布局就是指為文檔的根節點<html>元素設置一個基准字體大小 ...
原文：移動端rem布局雪碧圖解決方案 以及分享騰訊團隊的在線雪碧圖工具
先分享一下地址：http: alloyteam.github.io gopng 使用的方法也很簡單，將需要的小圖標拖進去，全部拖進去后再調位置 每拖一個進去都會幫你排列好，但是沒有間隔，所以全部拖進去后自己調 然后點擊右邊綠色的make按鈕即可 點擊后，上面的選項會高亮，提示你制作好了， 點擊PNG選項即可下載制作好的雪碧圖， 點擊css選項即可查看每個小圖標在雪碧圖中對應的x和Y位置 對於PC端 ...
2016-10-08 00:05 1 1788 推薦指數：
相關推薦
移動端頁面自適應解決方案—rem布局
該方案目前已過時，這里是更加完美的替代方案——rem布局(進階版) 相信很多剛開始寫移動端頁面的同志們都要面對頁面自適應的問題，當然解決方案很多，比如：百分比布局，彈性布局flex（什么是flex），也都能獲得不錯的效果，這里主要介紹的是本人在實踐中用的最順手最簡單的布局方案——rem ...
響應式下的雪碧圖解決方案 － 活用background-size / background-position
一、概述 在傳統的居中布局時，我們常用background-position這個屬性來進行雪碧圖的定位，在減少數據量的同時，保證准確定位。在移動端使用越來越重的現在，以往的傳統定位，已經無法達到目的，那么是否有合適的解決方案呢？答案是有的，讓我們先來了解background的兩個屬性 ...
雪碧圖
1.塊級元素水平和垂直居中的方法。 水平居中（margin:0 auto;） 水平居中（text-align：center;） 這個屬性在沒有浮動的情況下，我們可以將其轉換為inline/i ...
雪碧圖
雪碧圖（Sprites） 雪碧圖也叫CSS精靈， 是一種CSS圖像合成技術，就是將許多小圖標合並在一張背景透明的圖片上，使用background-position和background-size來控制圖片顯示的區域。 為什么要使用雪碧圖 ...
移動端頁面自適應解決方案—rem布局(進階版)
之前的一篇《手機端頁面自適應解決方案—rem布局》隨着時間的推移，該方案已然過時，故為大家介紹一個目前我極力推薦使用的，更加完美的方案——rem布局（進階版） 該方案使用相當簡單，把下面這段已壓縮過的 原生JS（源碼已在文章底部更新，2017/5/3） 放到 HTML 的 head 標簽 ...
移動端webapp自適應實踐（css雪碧圖制作小工具實踐）圖文並茂
為什么要寫這個 以前寫過關於webapp自適應屏幕的文章（鏈接），不過寫的大多數群眾看不懂，所以來個圖文並茂的版本。雖然只是一個簡單的頁面，不過在做的過程中也遇到了一些問題，也算是好事吧！ 該示例 ...
pc端與移動端適配解決方案之rem
使用方式： 在html頁面開頭，引入下面的原生js代碼 上述js的意思是： 如果頁面的寬度超過了640px，那么頁面中html的font-size恆為100px，否則，頁面中html的font-size的大小為： 100 * (當前頁面寬度 / 640) rem原理 ...