html在pc端变形

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html在pc端变形相关的知识,希望对你有一定的参考价值。

手机端测试挺好的,在电脑端就不行了。

参考技术A 这是当然的啦,手机是竖屏的,电脑是横屏的,你想用一套代码就在手机和电脑都实现最佳浏览效果,哪有这么便宜的事?你得根据不同的屏幕分辨率分别套用不同的样式,可以去百度一下看看别人的网站是如何做到自适应的。 参考技术B 需要写自适应,H5

前端响应式开发

最近在工作中遇到一些让人头疼的问题——多媒体查询,也就是大家所说的响应式布局(多终端适配)。在实际的开发过程中,响应式的设计使得多终端的适配变得非常方便,响应式展现的方式,更有一种组装变形金刚的感觉,但也在实际工作中发现了许多问题:

  一、开发思维变得复杂

  在我们开发页面的时候,思维无法专注于单一的PC端、移动端以及Pad端,开发每一个元素与版块的时候,都需要考虑多终端适配;所以建议大家在接到这一类项目的时候,不要急于去开发,先把所有的终端页面设计图全部浏览的看一遍,不单单光是看,看的过程中脑海里要有响应式开发的思路,不至于到后期花费大量的时间用于修改页面。

  二、牵一发而动全身

  响应式的设计初衷是一次开发,多终端适配,但在实际的应用中,即使有通过判断终端类型,而变换页面内容甚至隐藏的方式,也无法应对用户所提出的多终端之间的各种要求,而且每次需要修改一个页面的元素或者局部板块时,对于其他终端页面的影响都会令人头疼,因为考虑的内容较多,比如浏览器版本对于新技术的支持程度、不同版本间的BUG兼容、使用场景、屏幕的大小变化等等,顾忌太多,牵一发而动全身的特性无疑为后期维护增加了难度。

  三、文件体积偏大
  有时候为了适配多终端、多版本浏览器之间的兼容问题,需要为不同终端写不同的代码段,但如果通过一个页面满足多终端的个性化需求,这个页面的代码体积无疑是非常大的,对于PC端还好说,对于流量昂贵的移动终端这无疑是致命的。

说了这么多问题,我们为什么还要用响应式,响应式也有几个优点:

  1. 工作量少,网站、代码、内容只需要一份,多出来的工作量只是JavaScript脚本、CSS样式;
  2. 每个设备都能得到正确的设计;
  3. 搜索优化;
  4. 数据调用简单;

下面说一下响应式开发都需要做些什么:

 第一步:Meta标签 (允许网页宽度自动调整)

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />


【viewport是网页默认的宽度和高度,上面代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。】

(所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。)
  or
(ie8以及更早的浏览器不支持Media Query
可以使用media-queries.js或者respond.js来为IE添加Media Query支持)

 

第二步:HTML结构

注意:尽量不使用绝对宽度
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素;
2)相对字体大小
字体可以不使用绝对大小(px),使用相对大小(em)。
body {
    font: normal 100% Helvetica, Arial, sans-serif;
}



第三步:媒介查询(css3 Media Query 媒介查询)

  方法一:
  @media screen and (max-width:1000px){
     content:{width:100%;}
  }

  方法二:

  <link rel="stylesheet" media="screen and (max-width:640px)" href="">

 

媒体查询能检测的特性:

width : 视口宽度
height : 视口高度
device-width :设备屏幕宽度
device-height : 设备屏幕高度orientation : 检查设备处于横向还是纵向
aspect-ratio : 视口宽度和高度的宽高比,例如:一个16:9比例的显示屏可以这样定义aspect-ratio : 16/9;
device-aspect-ratio : 设备屏幕宽度和高度的宽高比;
color : 每种颜色的位数,例如min-color:16会检测设备是否拥有16位颜色;
color-index :设备的颜色索引表中的颜色数,值必须是非负数的;
monochrome : 检测单色帧缓冲区中每像素所使用的位数,值必须是非负数的,例如:monochrome : 2;
resolution : 用来检测屏幕或打印机的分辨率,如min-resolution : 300dpi,每厘米像素点数的度量值,如min-resolution : 118dpcm;
scan : 电视机的扫描方式,值可设为progressive(逐行扫描)或者interlace(隔行扫描),如720p HD 电视(720p的p表示逐行扫描),scan : progressive,而1080i HD 电视的i表示隔行扫描,匹配scan : interlace ; grid : 用来检测输出设备是网格设备还是位图设备;

 

屏幕尺寸响应
  1.固定布局
  2.流动布局
  3.自定义布局
  4.栅格布局

  分辨率:预设的分辨率有(可切换横版,竖版)
  普通智能手机:320×480
  iPhone5:320×568
  普通平板:800×600
  iPad2、3、mini:768×1024
  宽屏电脑:1280×800
  HDTV:1920×1080

以上是关于html在pc端变形的主要内容,如果未能解决你的问题,请参考以下文章

Mega-Fiers Unity顶点变形动画插件

H5防止安卓手机软键盘弹出挤压页面导致变形的方法

深入理解CSS变形transform(2d)

Python 图片变形(转)

项目:变形金刚拼图

Unity网格变形开源库测评