原文:前端pc版的簡單適配

我們都知道對於前端pc版本的適配是一個難題,大部分都是做的媒體查詢。但是有時間公司不要媒體查詢 就是需要不管多大的屏幕都是滿屏顯示。我就在考慮為啥不用rem給pc端做個適配。 我是基於設計圖是 的做的簡單的js適配。 lt script type text javascript gt var winWidth document.documentElement.offsetWidth documen ...

2018-11-01 00:21 0 2943 推薦指數:

查看詳情

前端PC端頁面,適配解決方案

代碼正常寫,在最下面引入此js代碼。完美解決適配問題! 代碼如下: const baseWidth = 1920; const baseHeight = 1080; let timer = null; let calcScale ...

Thu Apr 22 19:07:00 CST 2021 0 829
一個簡單PC端與移動端的適配(通過UA)

只需在header引用個js文件, 原理就是判斷UA里面的標識. 加下面代碼添加到js文件,在頭文件引用即可 var Pc_url = 'http://www.baidu.com'; //PC端網址var Phone_url = 'http://www.sougou.com'; //手機端網址 ...

Tue Jan 02 19:38:00 CST 2018 0 1145
VUE之PC大屏適配

PC屏幕適配主要使用兩個插件: 1、postcss-plugin-px2rem:用於將項目中的px自動轉換成ren; 2、lib-flexible:用於針對不同屏幕進行適配; lib-flexble: lib-flexible會自動在html的head中添加一個 meta ...

Tue Aug 31 00:44:00 CST 2021 0 387
vue適配pc和移動

PC適配:   媒體查詢 ,flex rem (PC適配主要使用媒體查詢+百分比) 移動適配:   主要使用 rem+flex 也有用JS代碼斷實現 vue腳手架 移動適配:   核心思路-》根元素大小-頁面尺寸和rem的關系   1,將根元素的大小設置 ...

Sat Apr 04 07:31:00 CST 2020 0 2036
pc端使用rem適配

$(function(){ var whdef = 100/1920;// 表示1920的設計圖,使用100PX的默認值 var wH = window.innerHeight;// 當前窗口的高度 ...

Tue Jun 23 17:48:00 CST 2020 0 2617
pc端頁面適配思路

對於pc端網頁的適配,筆者大體的適配方法就是在整體布局div時,盡量讓width、height都使用百分比方式,而對於內部div,以及元素之間的margin、padding、width、height等屬性,使用rem來進行適配。直接貼代碼說明原理。 整體思路便是這樣,而要讓頁面渲染完成之前 ...

Thu Nov 12 00:44:00 CST 2020 1 1049
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM