做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结一下,通常进行自适应高度和宽度,图片时,一般与页面的布局存在关系. 1.最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px.960px.或者常用的980px作为最小宽度 2.1024*768之后稍大的分辨率就是1280*768了,则可以采用1200px或者1220px作为稍大的

<script> // //判断屏幕宽度到达手机宽度的时候,直接跳转手机页面 // window.addEventListener("resize", function() { // if (/Android|ios|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { // window.location.href = 'http://103.47.137.221/mo

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:

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全 时间:2015-08-17 16:50:40      阅读:3961      评论:0      收藏:0      [点我收藏+] 标签:style   代码   si   sp   bs   im   c   res   on PC端 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.14.1寸.15寸; ) 1280*800

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寸 仅苹果用) 144

相信大家都知道大端存储和小端存储的概念,这在平时,我们一般不用考虑,但是,在某些场合,这些概念就显得很重要,比如,在 Socket 通信时,我们的电脑是小端存储模式,可是传送数据或者消息给对方电脑时,恰巧,对方的电脑是大端存储,那么,如果你直接的传输,那么对方解析的肯定就是乱码了,所以,我们需要在传输数据之前转换成网络顺序.      这篇文章的目的不是解决上述的处理字节顺序的问题,而是,用C语言实现测试电脑的字节存储顺序.      在C语言中有一种结构--Union,被称为"共用体"

在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. 而移动端则较为复杂,它涉及到三个视口:布局视口(Layout Viewport).视觉视口(Visual Viewport)和理想视口(Ideal Viewport). 本文主要讨论移动端中的视口. 1. 基本概念 1.1 两种像素 像素是计算机屏幕中显示特定颜色的最小区域.屏幕中的像素越多,同一

这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 1.2 屏幕密度(ppi) 屏幕密度是指一个设备表面上存在的像素数量,它通常以每1英寸上排列有多少像素来计算(ppi:Pixels Per Inch).苹果公司声称人类的肉眼无法区分单个像素,当一个显示器像素密度超过300ppi的时候,肉眼就

本篇主要是记录一下移动端视口的分类说明和其它的一些知识.在开始之前,先看一个典型的例子: <meta name="viewport" content="width=device-width,initial-scale=1"> @media screen and (max-width:480px){ //宽度不超过480px是的样式 } 上述代码相信大家在做移动端开发时经常去书写.它研究了两个内容:meta视口和宽度媒体查询.通常我们都会称上述代码为CSS

一般的橙白,橙,绿白,蓝,蓝白,绿,棕白,棕. 若是只有四根线的,则任选四根,做线时对应水晶头的1\2\3\6四个入口压制即可. 如果只有一根网线,但想两台机子同时上网,不增加外设,做网线时45水晶头连接方法 水晶头金属面对自己,从左到右为1-8 (白橙.橙,白绿.蓝,白蓝.绿,白棕.棕) 网 线 的 接 法 一.PC连HUB (电脑连接上网设备) A端:(标准568B):白橙,橙,白绿,蓝,白蓝,绿,白棕,棕. B端:(标准568B):白橙,橙,白绿,蓝,白蓝,绿,白棕,棕. 二.PC连PC 

1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大 家一定会想起em单位em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其实很相似,只不过一个计 算的规则是依赖根元素一个是依赖父元素计算 2.rem为什么使用?rem怎么用? 先说下移动端布局常用的方式吧 1.流式布局(通过大量的百分比来控制页面)用大量的百分比肯定会出现兼容性问题或者直

1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,Web 前端开发领域,像素有以下两层含义: (1) 设备像素:设备屏幕的物理像素,对于任何设备来讲物理像素的数量是固定的. (2) CSS像素:这是一个抽象的概念,它是为 Web 开发者创建的. 如下图,是在缩放比例为1,即 scale = 1 的情况下,设备像素和CSS像素示意图: 我们再来考虑这样

加上下面js即可 硬核判断: <script type="text/javascript"> //平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platform; system.win = p.indexOf(; system.mac = p.indexOf(; system.x11 = (p == ); if(system.win||sy

1.打开fiddler,tools->fiddler options 勾选check for certificate revocation 2.手机打开浏览器 输入fiddler所在电脑ip及端口号,回车后显示下载fiddlerRoot证书 点击后下载 之后在手机系统安全下安装 android手机导入证书见另一篇介绍

一.Bootstrap使用 1.搭建Bootstrap页面骨架及项目目录结构 ``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的图片文件 ├─ /js/ ························ 自己

有关手机抓包之前没有接触过,实际工作用到的不多,因此学了也就忘了. 来了新公司之后,产品主要以移动端为主,抓取线上线下包便成了平常之事,一些开发也会来请教如何在手机上抓包. 回归正题,抓取移动端包有很多种方式,自行调试方法很多样化,httpcapture.Fiddler等工具都可以满足. 本文着重介绍Fiddler的移动端抓包.(网上也相应有许多帖子) Fiddler启动便相当于启动了代理(8888),因此着重于移动端的配置. 首先,手机必须和Fiddler的电脑在一个网段. 其次,配置手机网络

转载链接:移动端开发中,关于适配问题的一点总结(一) 视口 布局视口layout viewport 视觉视口visual viewport 理想视口 缩放 一个重大区别 最小缩放 和最大缩放 分辨率 物理分辨率dpi 设备像素比 dpr dipsdevice-independent pixels 例子 meta视口 完美的meta 视口 视口 <meta name="viewport" content="width=device-width"/> 我们一

屏幕的尺寸是指当前分辨率下的高度.宽度,而不是物理高度.宽度. 如:一个22寸的显示器,屏幕分辨率为1366 * 768,那么我们可以获取到的屏幕高度为1366px,宽度为768px. 屏幕宽度和高度.屏幕可用宽度和高度. 图一是javascript代码截图,图二是打印结果. 通过图二的打印结果可以看出,屏幕的高度大于屏幕可用高度.缺少的那部分就是电脑的任务栏高度   浏览器宽度和高度. 图一是javascript代码截图,图二是打印结果. 只要改变浏览器大小,刷新即可看到打印结果变化   页面

前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2px 所以我们在移动端中为了让1px的线“看起来”苗条些,会采用一些手段. 解决办法 实现1px的线 方法一:transform 在移动端中,我们对宽度100%,1px的线进行改造,将其宽度设为200%,高度不变,之后使用transform对其缩放50%. .line{ width:200% ; h

转: 只需2分钟!PC端的报表即可转换成手机报表 手机制作报表,这个大家不知有没有尝试过,虽然我们平时都用电脑做,但是电脑要是不在身边了,手机就可以用来应应急.但其实小编并没有在手机上制作报表的实践经验.通常是在pc上编辑.制作然后传到手机上,在手机上做简单的查看.检索.预览--.但如何才能将pc端制作的报表同步到手机上呢? 像Smartbi,在PC端发布的资源必须同时满足如下两项条件设置,才能保证在移动终端上正常显示: 基于Smartbi报表制作同步移动端条件一:资源到移动终端的显示设置. 1

很多网页都是基于网格设计的,这说明网页是按列来布局的. 原理就是讲网页分成十二列,每列的宽度是8.33%,元素的宽度,用几列来定义,正是因为这一点,才可以做到响应,就是随着窗口宽度的变化,给元素分配不同的列数! 比如: 大于1280px的时候,三个元素,两边的各占三列,中间的占六列 小于1280px大于980px的时候,左边占六列,中间的占六列,右边占十二列(此时右边就换行了) 小于980px的时候,左右中都占十二列,各占一行. 我们怎么获取当前窗口的宽度呢,就需要用到实现响应式的基础:媒体查询