js实现不同设备尺寸切换显示iframe效果代码
代码语言:html
所属分类:其他
代码描述:js实现不同设备尺寸切换显示iframe效果代码,包含手机、平板、电脑
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } .facility { position: fixed; left: 0; top: 0; right: 0; } ul { font-size: 0; text-align: center; background-color: #f3f4f6; } li { display: inline-block; padding: 20px; line-height: 29px; font-size: 14px; vertical-align: top; cursor: pointer; } li:first-child { padding: 20px 0; } svg { vertical-align: top; } .wrap { width: 1536px; margin-left: auto; margin-right: auto; height: 100%; height: calc(100% - 70px); padding-top: 70px; } iframe { width: 100%; height: 100%; } </style> </head> <body> <div class="facility"> <ul> <li>按不同尺寸查看:</li> <li> <svg width="8.57142857142857" height="24" viewBox="0 0 10 28" xmlns="http://www.w3.org/2000/svg" > <path d="M1.5 12h7a1.5 1.5 0 0 1 1.5 1.5v13A1.5 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0