孟村网 网站,北京网站制作网站,图片分页网站模板,网站建设合优页面的适配#xff0c;就是一个页面能在PC端正常访问#xff0c;同时也可以在移动端正正常访问。
现在我们可以通过弹性布局【Flexible布局】、媒体查询和响应式布局。除此之外#xff0c;还可以通过rem和vw针对性地解决页面适配问题。
响应式布局
响应式布局的核心…页面的适配就是一个页面能在PC端正常访问同时也可以在移动端正正常访问。
现在我们可以通过弹性布局【Flexible布局】、媒体查询和响应式布局。除此之外还可以通过rem和vw针对性地解决页面适配问题。
响应式布局
响应式布局的核心就是一个网站可以 兼容多个终端而不是每一个终端都得开发一个独立的版本。
响应式布局主要是通过可视区和媒体查询来完成。
在HTML的head标签中的meta标签来设置浏览器的可视区域。
meta nameviewport contentwidthdevice-width, initial-scale1.0,maximum-scale1.0, user-scalableno /在没有摄者浏览器的可视区域前H5调试效果是这样的 超出部分出现了滚动条。
设置可视区域后效果是这样的 注意简单的了解一下物理像素和CSS像素
像素也就是px是图像显示的基本单位每一个像素可以有颜色数值和位置信息每一个图像是由无数个像素组成。
物理像素是设备屏幕拥有多少个像素主要是和渲染的硬件有关比如iPhone 6总共有750*1334个物理像素。
CSS像素就是逻辑像素是软件程序系统使用的像素。逻辑像素最终会转化为物理像素的。
物理像素和逻辑像素之间的转换可以通过window.devicePixelRatio来设置【window.devicePixelRatio是一个物理像素和逻辑像素的比例】
一般的屏幕使用1个物理像素来渲染一个逻辑像素这是后window.devicePixelRatio的值为1。
有一些高清的屏幕比如苹果的Retina屏幕使用2个或者3个物理像素来渲染一个逻辑像素这样屏幕更清晰。
浏览器厂商提供了一种虚拟的布局视区来解决页面在手机上显示的问题通过meta标签设置Viewport来修改。比如
meta nameviewport contentwidthdevice-width, initial-scale1.0,
maximum-scale1.0, user-scalableno /width控制可视区域的宽度比如设置为320或者device-width,表示设备的实际宽度这样为了自适应布局。height控制可视区域的高度比如设置为640或者device-heightinitial-scale设置页面的初始缩放比例【0~10】等于1的时候表示不缩放大于1时表示放大小于1表示缩小。initial-scale只是设置初始的比例用户可以自动放大缩小maximum-scale设置用户手动放大的最大比例可以设置0到10之间minimum-scale指定页面缩小的最小比例user-scalable表示是否允许用户手动缩放属性为yes或者no
当有的浏览器不支持user-scalableno的时候可以通过JavaScript来控制比如
window.onload () {document.addEventListener(touchstart, function (event) {// 两个手指操作if (event.touches.length 0) {event.preventDefault();}});let lastTouchEnd 0;document.addEventListener(touchend, function (event) {let now (new Date()).getTime();// 判断是否是双击两次间隔小于300ms认为是双击if (now - lastTouchEnd 300) {event.preventDefault();}lastTouchEnd now;})
}了解了浏览器的可视区域后接下来就是媒体查询了。
媒体查询
所谓的媒体查询就是告诉浏览器根据不同的条件渲染不同样式规则。
媒体查询在CSS中设置以media开头然后指定媒体类型也就是设备类型。随后指定媒体特性中间用and链接。
完整的语法如下
media 媒体类型 and (媒体特性){css样式
}media 媒体类型 and (媒体特性),媒体类型 and (媒体特性){css样式
}另一种方式是直接在link标签中定义比如
link relstylesheet media媒体类型 and (媒体特性) hrefexample.css /CSS中的媒体类型为
all用于所有设备。aural用于语音和声音合成器。braille用于盲文触摸式反馈设备。embossed用于打印的盲人印刷设备。handheld用于掌上设备或更小的设备如PDA和小型电话已废弃。print用于打印机和打印预览。projection用于投影设备。screen用于计算机屏幕、平板电脑、智能手机等。all用于所有设备。aural用于语音和声音合成器。braille用于盲文触摸式反馈设备。embossed用于打印的盲人印刷设备。handheld用于掌上设备或更小的设备如PDA和小型电话已废弃。print用于打印机和打印预览。projection用于投影设备。screen用于计算机屏幕、平板电脑、智能手机等。
逻辑运算符包括not、and和only。 not运算符用来对一条媒体查询条件的结果进行取反用来排除某种指定的媒体类型。 only运算符用来指定某种特定的媒体类型可以用来排除不支持媒体查询的浏览器 media not all {}media not print and (min-width:700px) {}media only screen and (min-width: 401px) and (max-width: 600px) {}/* 在支持媒体查询的浏览器中等于*/media screen and (min-width: 401px) and (max-width: 600px) {}/*如果想用于最小宽度为700像素或者横屏的手持设备上*/media screen (min-width:700px),handheld and (orientation:lanscape) {}这就是响应式布局的基本配置。
