在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ,也就是这个浏览器默认的viewport 2.visual viewport  , 浏览器可视区域viewport 3. ideal viewport  ,移动设备的理想viewport 通俗点讲,pc端css中的1px并不会等于移动端,原理很简单,举个例子说 通过chrome浏览器可以知道,一个I

最近的移动端项目终于告一段落了,其中遇到了不少问题,在此和大家总结分享. 首先,说一下结构.一般的手机页面大致可以分为五块:head, content, foot,solidbar,dialog. 针对这种布局,在此提供一种方式,这种方式使用了css3的一些样式属性.代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Demo</title&

--------------------HTML5新结构标签--------------------1.h5新增的主要语义化标签如下: 1.header 页面头部.页眉 2.nav 页面导航 3.article 一篇文章 4.section 文章中的章节 5.aside 侧边栏 6.footer 页面底部.页脚 pc端兼容需要引用对应的js脚本<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/

对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高

html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瓢城旅行社</title> <link

html5+css3pc端固定布局,大纲算法,section和div,结构分析 一．大纲算法 在HTML5中有一个很重要的概念,叫做HTML5 大纲算法(HTML5Outliner),它的用途是为用户提供一份页面的信息结构目录.比如我们经常使用的手册就是一个非常好的大纲结构: 测试工具:https://gsnedders.html5.org/outliner/ 这个工具可以上传本地html文件,也可以填写URL,或者直接在多行文本框上编写HTML5代码均可了解大纲. 通过我们将上一节课的代码编写

html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有任何思路的情况下,可以参考大量同类型的网站,了解一下大致结构.我们将要做的网站是一个旅行社的企业网站.经过大量参考,首页上,我们选择了最基本的四个模块. 四个基本模块:nav 导航.header头部.section首页主体.footer尾部 <!DOCTYPE html> <html lan

html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> <div class="wei-bu2"> <div class="yy dd1"> <h2>合作伙伴</h2> <hr> <ul> <li>途牛旅游网</li> <

html5+css3pc端固定布局,热门旅游取,标题介绍区,旅游项目区 样式: html代码: <!--主体--> <section class="zhu-ti"> <div class="zhu-ti2"> <h2>热门旅游</h2> <p>国内旅游.国外旅游.自助旅游.自驾旅游.油轮签证.主题旅游等各种最新热门旅游推荐</p> </div> <div class

html5+css3pc端固定布局,搜索区,插入大图,搜索框 设置一个div作为搜索区域 1.宽度为百分之百 2.最小宽度为1263,因为要考虑到手机,等小屏幕缩小后宽度会自适应,导致破坏布局,将最小宽度设置为1263后,当缩小低于1263时,就是1263的宽度不破坏布局 插入大图 将图片作为背景插入div区域,背景显示一次,背景居中显示 搜索框 在插入背景的div做搜索框,用定位方式居中 完成 html代码 <!--搜索区域--> <div class="sou-suo&qu

使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式.一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过定位和浮动的设置,就可以对整个页面进行布局.如图1所示为由多个盒子布局的页面,每个虚线框代表一个盒子模型. 图1  多个盒子定义页面布局 虽然CSS的样式属性非常多,但实际参与页面布局的属性其实很少.CSS的定位属性应用得非常广泛,可以控制元素的平面或空间位置,以及高度.宽度和可见性.也可以使用CS

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport ,也就是这个浏览器默认的viewport 2.visual viewport  , 浏览器可视区域viewport 3. ideal viewport  ,移动设备的理想viewport 通俗点讲,pc端css中的1px并不会等于移动端,原理很简单,举个例子说 通过chrome浏览器可以知道,一个I

阿里团队的高清布局方案代码 所谓高清方案就是根据设备屏幕的DPR(设备像素比,又称DPPX,比如dpr=2时,表示1个CSS像素由4个物理像素点组成) 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值,进而达到高清效果**. var _baseFontSize = baseFontSize || 100; var _fontscale = fontscale || 1; var win = window; var doc = win.document; var ua

按百分比布局,精度肯定不会有rem精确 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"> <title>Docum

1.viewport.js (function(window, document) { // 给hotcss开辟个命名空间,别问我为什么,我要给你准备你会用到的方法,免得用到的时候还要自己写. const hotcss = {} ;(function() { // 根据devicePixelRatio自定计算scale // 可以有效解决移动端1px这个世纪难题. let viewportEl = document.querySelector("meta[name=\"viewport

写移动端项目时,总是会纠结是用css3 media query 还是用rem.移动端框架挺多,但是因为项目都比较小,不考虑使用. 无意在网上找到一个移动端rem布局的解决方案,经个人实践,目前未出现什么大问题,收藏备用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端rem布局</title> &

文/九彩拼盘(简书作者)原文链接:http://www.jianshu.com/p/eb05c775d3c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. rem介绍 rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位.假设根元素的字体大小是10px, 则5rem的大小为 5*10=50px,例如 html{ font-size: 10px; } p{ width: 2rem; /* 2*10 = 20px;*/

这个问题在前端H5页面开发可以说是一个老生常谈的问题了.由于以前所有遇到的问题以及解决方法都会以文档的形式记录在电脑里,而非github或者blog,所以现在才一点一滴的整理上来,就当是一个心路历程吧. 由于开发习惯,我现在使用HBuilder 这个前端IDE.调试页面会经常直接打开工具栏中的chrome,然后打开chrome devtool ,问题解决后,会直接把链接放到微信中,基于微信自带的浏览器浏览.这时候就比较蛋疼了,每一次更改一个css,然后在微信浏览,由于微信自带浏览器的机制问题,无

浏览器的默认字体高是16px. 兼容性: 目前,IE9+,Firefox.Chrome.Safari.Opera 的主流版本都支持了rem. 对于不支持的浏览器,要多写一个绝对单位的声明,这样浏览器就会忽略用rem设定的字体大小. % css中的body先全局声明font-size=62.5%,%的算法和rem一样. 因为16px=100%,1px=6.25%,所以10px=62.5%. 1rem=10px,所以12px=1.2rem.px与rem的转换倍率是10,很方便.  使用方法 rem是

在电脑设置中选择:控制面板->外观和个性化->显示 可以设置页面的显示比例,原因是在1920*1080的分辨率下页面的图标就会变得比较小,方便用户看,这个功能就是把页面内容变大(默认是中等展示就是125%倍)就是说代码中100px,会有125px的效果,这也就是为什么,在页面中写一个1536px宽的块状元素,会占满宽为1920像素的整个屏幕.设计稿主体内容的宽度尽量小于1300px,过大了就放不下从而出现滚动条,同时居中自适应展示.