怎样开设网站,直客通产品如何上线,网站建设和维护视频,门户网站建设和运行保证的磋商文件视口
了解视口相关概念及理想视口的设置 是移动Web开发非常重要环节。
什么是视口#xff1f;
视口简单来说就是浏览器显示页面内容的区域。
在PC端#xff0c;正常的视口宽度就是整个浏览器的窗口可视区的宽度#xff0c;会随着浏览器窗口大小的重置而缩放#xff1b;…视口
了解视口相关概念及理想视口的设置 是移动Web开发非常重要环节。
什么是视口
视口简单来说就是浏览器显示页面内容的区域。
在PC端正常的视口宽度就是整个浏览器的窗口可视区的宽度会随着浏览器窗口大小的重置而缩放
大多数为PC端设计的网站宽度至少为800px,为了不破坏没有针对移动设备优化的PC网页移动端引入了视觉视口、布局视口、理想视口三个概念
视觉视口
视觉视口是指用户当前看到区域即设备宽度
布局视口
移动设备的浏览器都默认设置 了一个viewport元标签定义了一个虚拟的布局视口,CSS 布局将会根据它来进行计算并被它约束。
一般来讲移动设备上的viewport都是要大于浏览器可视区域的这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站移动设备上的浏览器都会把自己默认的viewport设为980px或1024px
所以PC上的网页基本能在手机上呈现只不过看上去很小一般默认允许用户通过手动缩放、平移来查看网页。
理想视口
布局视口对用户不友好【基于理想视口设计的网站不需要用户手动缩放也不需要出现横向滚动条网站的所有内容都可以正常的呈现给用户】移动端【适配】方案
由于手机屏幕尺寸、分辨率不同还要要考虑横竖屏问题为了使得web页面在不同移动设备上【实现尽可能统一或合理的展示效果】需要在开发过程中使用合理的适配方案。rem适配
rem单位介绍
Rem( font size of the root element) 是一个相对单位相对于根元素的字号大小进行计算
大多数浏览器的默认字号是16px因此默认1rem16px。
rem布局原理
在布局过程中只要使用 rem 设置元素的尺寸在改变 rem 的基准值 html 的字体大小的时候页面上的元素将等比例缩放实现适配。
rem适配实现
1设置页面的viewport
2以设计稿为基准值1rem100px,使用rem单位取代px常规布局。
3换算不同设备尺寸下1rem的值即改变不同尺寸下html 的font-size
使用remvw单位实现适配
沿用rem布局方案所有的布局元素及属性都用rem做单位,用vw单位设置html的font-size,这样就不再需要JS来动态计算根元素字体大小
