图片手机网站建设,多合一网站源码,萧县做网站的公司,小7手游官网下载 是看的b站一个老哥的视频#xff0c;做的汇总#xff0c;讲的嘎嘎棒。视频链接#xff1a;b站链接
视口viewport
pc端视口就是可视化的窗口#xff0c;不包含浏览器工具栏但是移动端#xff0c;不太一样#xff0c;布局的视口和可见的视口是不太一样的 移动端的网页… 是看的b站一个老哥的视频做的汇总讲的嘎嘎棒。视频链接b站链接
视口viewport
pc端视口就是可视化的窗口不包含浏览器工具栏但是移动端不太一样布局的视口和可见的视口是不太一样的 移动端的网页窗口往往比较小我们希望一个大的网页在移动端可以完成的显示所以在默认情况下移动端的布局视口是大于视觉视口的 移动端可以将视口划分为三种情况
布局视口(layout viewport)视觉视口(visual layout)理想视口(ideal layout)
布局视口 相对于980px布局的这个视口称之为布局视图。默认宽度就是980px 首先要把这行代码去掉不然看不了布局视口
meta nameviewport contentwidthdevice-width, initial-scale1.0浏览器默认的布局视口其实是宽980px的大盒子我们只关心宽因为高可能会很高还可以滚动 浏览器查看移动端浏览器会等比例的把980px缩成手机大小。所以你一开始设置的宽高移动端的时候还是这个宽高但是给人的感觉却是小了不小
代码验证
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge!-- meta nameviewport contentwidthdevice-width, initial-scale1.0 --titleDocument/titlestyle.box {width: 100px;height: 100px;background-color: pink;}/style
/headbodydiv classbox/div
/body/htmlpc端效果 移动端效果 布局视口总图解 但是这种效果明显不是我们想要的我们想要的是相对与设备大小而不是相对于980px
所以我们需要修改布局视口的宽度以适应我们的需求
meta nameviewport contentwidthdevice-width, initial-scale1.0通过content来指定布局视口的宽度 这个属性只针对移动端对pc端无效 默认宽度一般都980pxcontentwidth980px 宽度越大布局视口就越大同比缩小到移动端上则元素就看起来越小。反之则越大 我们希望布局视口就是根绝设备的宽度来设备宽度多少则布局视口宽度就是多少 所以就用到了device-width这个值它就是设备宽度
视觉视口 就是移动端可见区域(屏幕) 理想视口 布局视口的宽就等于移动设备的宽就是理想视口。这样我们就能保证给元素设定多少px就是多少px 也就是这行代码
meta nameviewport contentwidthdevice-width, initial-scale1.0元信息metaname为viewport时可以设置的属性
如图 真实移动端开发会这样写
meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno, minimum-scale1.0,maximum-scale1.0移动端适配方案
上面的viewport只是解决了视口问题。但是我们想要根据屏幕大小让元素能有不同的宽高表现则就需要适配。常见的适配方案有以下几种
rem媒体查询 rem是相对单位相对于html标签的font-size字体大小。1rem 1个html的字号大小 核心就是用媒体查询根绝屏幕大小给html设置不同的font-size字号大小然后元素只需要给rem即可
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0, user-scalableno, minimum-scale1.0,maximum-scale1.0titleDocument/titlestylemedia only screen and (min-width: 320px) {html {font-size: 14px;}}media only screen and (min-width: 480px) {html {font-size: 16px;}}media only screen and (min-width: 540px) {html {font-size: 17px;}}media only screen and (min-width: 640px) {html {font-size: 18px;}}media only screen and (min-width: 720px) {html {font-size: 19px;}}media only screen and (min-width: 750px) {html {font-size: 20px;}}* {padding: 0;margin: 0;}.app {width: 100%;height: 100%;}.box {display: flex;justify-content: space-between;}.box .left {width: 10rem;height: 10rem;background-color: pink;}.box .right {width: 10rem;height: 10rem;background-color: pink;}/style
/headbodydiv classappdiv classboxdiv classleft1/divdiv classright2/div/div/div
/body/html推荐一个好用的插件可以直接把px转换为对应的rem或vw 点击设置图标进入设置页面 在设置页面进行rem设置 如果给的是设计图是375的这里就填37.5。如果是750就写75
remflexible.js
实时监听屏幕尺寸然后根绝屏幕尺寸来动态的设置html字号的大小
简写版的理解flexible用真实开发千万别用这个
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0, user-scalableno, minimum-scale1.0,maximum-scale1.0titleDocument/titlescript// 获取html元素const htmlEl document.documentElement// 动态根据屏幕设置html字号大小function setRemUtil() {// 获取屏幕宽度let screenWidth htmlEl.clientWidth// html元素的字号大小let htmlFontSize screenWidth / 15console.log(htmlFontSize)// 设置给html字号htmlEl.style.fontSize htmlFontSize px}// 进来的时候就调用一下如果不调用就会按16px走setRemUtil()// 监听屏幕尺寸变化window.addEventListener(resize, setRemUtil)/scriptstyle* {padding: 0;margin: 0;}.app {width: 100%;height: 100%;}.box {display: flex;justify-content: space-between;}.box .left {width: 5rem;height: 5rem;background-color: pink;}.box .right {width: 5rem;height: 5rem;background-color: pink;}/style
/headbodydiv classappdiv classboxdiv classleft1/divdiv classright2/div/div/div
/body/html完整版
flexible.js
;(function flexible(window, document) {var docEl document.documentElementvar dpr window.devicePixelRatio || 1// adjust body font sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize 12 * dpr px} else {document.addEventListener(DOMContentLoaded, setBodyFontSize)}}setBodyFontSize()// set 1rem viewWidth / 15function setRemUnit() {var rem docEl.clientWidth / 15docEl.style.fontSize rem px}setRemUnit()// reset rem unit on page resizewindow.addEventListener(resize, setRemUnit)window.addEventListener(pageshow, function (e) {if (e.persisted) {setRemUnit()}})// detect 0.5px supportsif (dpr 2) {var fakeBody document.createElement(body)var testElement document.createElement(div)testElement.style.border .5px solid transparentfakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight 1) {docEl.classList.add(hairlines)}docEl.removeChild(fakeBody)}
})(window, document)xxx.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewportcontentwidthdevice-width, initial-scale1.0, user-scalableno, minimum-scale1.0,maximum-scale1.0titleDocument/titlescript src./flexible.js/scriptstyle* {padding: 0;margin: 0;}.app {width: 100%;height: 100%;}.box {display: flex;justify-content: space-between;}.box .left {width: 5rem;height: 5rem;background-color: pink;}.box .right {width: 5rem;height: 5rem;background-color: pink;}/style
/headbodydiv classappdiv classboxdiv classleft1/divdiv classright2/div/div/div
/body/htmlvw/vh(推荐) vw就是把视口(屏幕)100等分1vw 1等份。vh同理。例如375的屏幕1vw就是3.75px到420的屏幕1vw就是4.2px 可以使用上面的插件进行转换 图线标注的地方如果给的设计图是375的我们这里就写375。如果是750就写750
然后我们就可以使用插件进行转换了
