视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口). 视口单位中的“视口”,桌面端指的是浏览器的可视区域:移动端指的就是Viewport中的Layout Viewport. 根据CSS3规范,视口单位主要包括以下4个: 1.vw:1vw等于视口宽度的1%. 2.vh:1vh等于视口高

不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC端访问显示: 移动端访问显示: 2.实现: 不考虑移动端搜索引擎优化的话,只需要通过JS判断是否移动端,然后确定是否跳转到指定页面就行了,主要JS如下: //判断是否移动端,如果是则跳转到指定的URL地址 function browserRedirect(url) { //只读的字符串,声明了浏览器

一.前言: 响应式web设计离不开百分比.但是,CSS百分比并不是所有的问题的最佳解决方案.CSS的宽度是相对于包含它的最近的父元素的宽度的.但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该怎么办? 二.“vh” & “vw”: vh:相对于视窗的高度:视窗高度是100vh. vw:相对于视窗的宽度:视窗宽度是100vw. 视窗的10%: 0 视窗的25%: 0 视窗的50%: 0 视窗的100%高度(看我!!!) 看我!!!看我...!!!我是浏览器视窗的宽度(你

引用文档:http://caibaojian.com/vw-vh.html: http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/: http://blog.csdn.net/ZNYSYS520/article/details/76053961 周六和同事讨论问题时,突然聊到了vw和vh,今天整理了一下vw和vh的一些小知识点吧,日后可以自己复习的时候看看. 什么是viewpo

1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了, em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事

CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的: 保护有用的浏览器默认样式而不是完全去掉它们 一般化的样式:为大部分HTML元素提供 修复浏览器自身的bug并保证各浏览器的一致性 优化CSS可用性:用一些小技巧 解释代码:用注释和详细的文档来 Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素.排版.列表.嵌入的

本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去Can I use去查. 一 px 相对长度单位,浏览器的度量单位,相对于物理像素(显示器屏幕分辨率),1px在高清屏幕下可能占用2个物理像素.甚至3个物理像素,有关物理像素和px之间转换比,可以查看这篇文章. 二 em 相对于当前DOM元素的font-size. 如果设置当前元素的font-siz

CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } 2.单行文本溢出显示省略号- p { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space:

实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @media screen and (max-width: 1221px) { .wapnone{display:none; } } 在需要隐藏的区域加一个DIV,代码如下: <div class="wapnone">你要css判断隐藏的内容</div> 的1221px表

本教程案例在线演示 有路网PC端 有路网移动端 教程配套源码资源 教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成以下结构: div不像 h1,p标签,没有任何默认样式,其主要作用是标识网页上的某块区域.常见做法是通过给div元素加上id或class,然后通过css选中某个div,对其进行样式美化. <div class="demo">我是一个div</div> <sty

一个移动端与pc端之间最主要的也就是尺寸问题,苹果与安卓的机型尺寸大小相差甚多,一个尺寸都会影响用户的体验.那么我们来了解一下一些常用的解决方法. 一般在网页中都会在头部有一些这样的代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 1)首先 nam

效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条. 但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件 rem.js可以放在src文件夹下,我是放在src下的utils文件夹中 初始的rem配置 // 设置 rem 函数 functi

阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮 浏览器菜单栏 mac: cammond + +/- 浏览器菜单栏 由于浏览器菜单栏属于系统软件权限,没发控制,我们着手解决ctrl/cammond + +/- 或

最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,iphone 6 plus,iphone6,S5等)的Flexbox弹性布局. 还要再说的是,pc端和移动端淘宝购物车页面的Bug基本修复完毕,完全适合一个对HTML,CSS,CSS3,HTML5和Js有基础,并且熟悉jQuery,SCSS,熟悉JSON数据交换格式,jQuery Ajax的人进行学习.

学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区域 本节课,我们将探讨一下首页中最底部的区域.这部分区域由两个部分组成,一个是说明内容,有:合作伙伴.旅游 FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号. //底部区域父元素 <footer id="footer"> ... </footer> //底

学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．热门旅游区 本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下: //热门旅游区父元素 <div id="tour"> ... </div> //旅游父元素 #tour { w

学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．大纲算法  在HTML5中有一个很重要的概念,叫做HTML5大纲算法(HTML5Outliner),它的用途是为用户提供一份页面的信息结构目录.比如我们经常使用的手册就是一个非常好的大纲 结构: 合理的使用HTML5元素标签,可以生成一个非常清晰的文档大纲,我们可以通过各种 工具去查看当前页面,比如谷歌和火狐

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计

http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了,但这次也很有必要拿出来探讨下.为什么呢?往下看呗... 最 近在折腾公司首页的改版,设计师设计了三个版本,宽度分别为1600px,1200px,960px.看到这三个尺寸的设计,很明显需要做PC端的响应 式,我们都知道针对IE9+和其他高富帅浏览器的响应式,使用Media Query轻松搞定.至于I

1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name="viewport" content="width=1220"> 2.如果不想让页面有水平滚动条又有元素需要固定在屏幕底部,则可以按以下方法操作 1)给html页面设置视口宽度 2)判断是否为移动设备,对pc和移动设备分别设置样式,如下: $(function(

亲测通过 1,pc端生成带有当前会话的sessionid的url(通过微信来扫描) 2,扫描后,微信浏览器将访问url,将微信浏览器中的sessionid改成通过url传过来的session(pc端),然后引导用户进入微信网页授权地址,参考 http://mp.weixin.qq.com/wiki/9/01f711493b5a02f24b04365ac5d8fd95.html 3,在微信浏览器中得到openid,并存入session private String sid; private Str