css响应式布局及分辨率（PC端、H5端）

PC端

按屏幕宽度大小排序

分辨率比例 | 设备尺寸

1024*500 （8.9寸）

1024*768 （比例4：3 | 10.4寸、12.1寸、14.1寸、15寸; ）

1280*800（16：10 |15.4寸）

1280*1024(比例：5：4 | 14.1寸、15.0寸)

1280*854(比例：15：10 | 15.2）

1366*768 (比例：16：9 | 不常见）

1440*900 （16：10 17寸仅苹果用）

1440*1050（比例：5：4 | 14.1寸、15.0寸）

1600*1024（14：9 不常见）

1600*1200 （4：3 | 15、16.1）

1680*1050（16：10 | 15.4寸、20.0寸）

1920*1200 (23寸）

常用分辨率

1024 1280 1366 1440 1680 1920

@media screen and (min-width: 1024px) and (max-width:1100px){} /*>=1024 and <1100的设备*/@media screen and (min-width: 1100px) {} /*>=1100的设备*/@media screen and (min-width: 1280px) {} /*>=1280的设备*/@media screen and (min-width: 1366px) {}  @media screen and (min-width: 1440px) {} @media screen and (min-width: 1680px) {}
@media screen and (min-width: 1920px) {}

移动端分辨率

@media screen and (max-width: 768px){}

rem.js（h5和pc）

var wWidth = window.screen.width;// 当前窗口的宽
if (wWidth <= 768) {//移动端(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;var len = 100* (clientWidth / 750);docEl.style.fontSize = len + 'px';};recalc();if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);})(document, window);
} else {//pc端$(window).resize(function ()// 绑定到窗口的这个事件中{pcRem()});pcRem();function pcRem () {var whdef = 100/1920;// 表示1920的设计图,使用100px的默认值var wH = window.screen.height;// 当前窗口的高度var wW = window.screen.width;// 当前窗口的宽度if(wW>768&&wW<=1920){var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值$('html').css('font-size', rem + "px");}else {$('html').css('font-size', 100 + "px");}}}

注：rem不兼容ie8和ie8以下的浏览器

css响应式布局及分辨率（PC端、H5端）相关推荐

css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
CSS响应式布局（自适应布局）
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...
CSS - 响应式布局（一）媒体查询
目录响应式布局引子理解响应式网页和响应式布局原理媒体查询什么是媒体查询? 什么是媒体类型? 什么是媒体特性? 媒体查询语法仿三星官网首页响应式布局引子通过前面两节的学习 CSS - ...
html，css响应式布局案例练习--星巴克官网demo
前言继续练习响应式布局,我这次选的是星巴克的官网,进行一个页面的还原,还原程度达不到100%,不过也是可以进行一个学习过程的一个练习,细节很多,本人由于初学阶段,用了一天的时间就写了一个官网首页,兼 ...
CSS——响应式布局案例以及点击出现下拉框实现过程
文章目录前言一.示例图二.实现过程 1.HTML结构 2.CSS样式 3.JS行为总结前言本文主要介绍有关响应式布局的案例实现过程. 一.示例图二.实现过程 1.HTML 代码如下(示例 ...
前端三件套系例之CSS——响应式布局
文章目录 1.什么是响应式设计 1-1 定义 1-2 响应式设计的优势 2.屏幕的相关概念 3.viewport 视口 3-1 什么是viewport 3-2 设置viewport 4.媒体查询 @m ...
CSS响应式：根据分辨率加载不同CSS的几个方法
一般情况下,根据分辨率加载pc端 wap端 pad端三个css文件,示例: <link rel="stylesheet" type="text/css" ...

css响应式布局及分辨率（PC端、H5端）

PC端

常用分辨率

移动端分辨率

rem.js（h5和pc）

css响应式布局及分辨率（PC端、H5端）相关推荐

最新文章

热门文章