攻击jsp网站,四川二级站seo整站优化排名,虚拟主机网站建设步骤?,深圳网站建设快速排名移动端适配怎么做#xff1f;
适配的目的是在屏幕大小不同的终端设备拥有统一的界面#xff0c;让拥有更大屏幕的终端展示更多的内容。
meta viewport (视口)
移动端初始视口的大小默认是980px#xff0c;因为世界上绝大多数PC网页的版心宽度为980px #xff0c;如果网页…移动端适配怎么做
适配的目的是在屏幕大小不同的终端设备拥有统一的界面让拥有更大屏幕的终端展示更多的内容。
meta viewport (视口)
移动端初始视口的大小默认是980px因为世界上绝大多数PC网页的版心宽度为980px 如果网页没有专门做移动端适配此时用手机访问网页旁边刚好没有留白不过页面缩放后文字会变得非常小。
为了解决页面缩放的体验问题在网页代码的头部加入一行viewport元标签。这里的device-width告诉浏览器将视口的宽度设置为设备宽度(这个宽度是人为预设的,不设的话就是980px)。
属性含义
initial-scale第一次进入页面的初始比例minimum-scale允许缩小最小比例maximum-scale允许放大最大比例user-scalable允许使用者缩放 1 or 0 (yes or no)
metanameviewportcontentwidthdevice-width, initial-scale1.0图片适配
img {max-width: 100%;}此时图片会自动缩放,同时图片最大显示为其自身的100% (即最大只可以显示为自身那么大)。
为什么不用 img{width: 100%;}当容器大于图片宽度时图片会拉伸变形变模糊。
媒体查询
针对不用的设备提前为网页设定各种CSS样式。CSS3中的Media Query模块自动检测屏幕宽度然后加载相应的CSS文件语法举例media screen and (min-width:1200px){ body{background-color: red;}当屏幕宽度大于1200px时背景色变为红色。
动态 rem 方案
和媒体查询配合实现响应式布局。
px、em、rem 有什么不同
px是pixel (像素) 是屏幕上显示数据的最基本的点在HTML中默认的单位就是px。
em是一个相对大小。相对于父元素font-size的百分比大小。
rem是相对于根元素的font-size。
style* {padding: 0;margin: 0;}.w-550px {width: 550rem;height: 100px;background-color: rgb(113, 230, 191);}.w-750px {width: 750rem;height: 100px;background-color: rgb(239, 198, 94);}
/stylebodydiv classw-550px/divdiv classw-750px/divscriptfunction setRem() {const scale document.documentElement.clientWidth / 750document.documentElement.style.fontSize scale px}setRem()window.onresize setRem/script
/body
