1、html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>会议类专题</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="banner"> <img src="http://img0.imgtn.bdimg.com/it/u=2046728162,1432502044&fm=26&gp=0.jpg" alt=""> </div> <section class="plateOne lrPadding"> <img src="http://img0.imgtn.bdimg.com/it/u=2046728162,1432502044&fm=26&gp=0.jpg" alt=""> <p class="overflowHide">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字字文字文字文字文字字文字文字文字文字</p> </section> <section class="plateTwo lrPadding"> <h4>标题标题标题标题标题标题标题标题标题标题</h4> <p class="overflowHide">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字字文字文字文字文字字文字文字文字文字字文字文字文字文字</p> </section> <section class="plateThree lrPadding"> <h4>标题标题标题标题标题标题标题标题标题标题</h4> <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p> </section> <section class="meetingList lrPadding"> <ul> <li> <img src="http://img0.imgtn.bdimg.com/it/u=2046728162,1432502044&fm=26&gp=0.jpg" alt=""> <p class="overflowHide">文字文字文字文字</p> </li> <li> <img src="http://img0.imgtn.bdimg.com/it/u=2046728162,1432502044&fm=26&gp=0.jpg" alt=""> <p class="overflowHide">文字文字文字文字</p> </li> <li> <img src="http://img0.imgtn.bdimg.com/it/u=2046728162,1432502044&fm=26&gp=0.jpg" alt=""> <p class="overflowHide">文字文字文字文字</p> </li> <li> <img src="http://img0.imgtn.bdimg.com/it/u=2046728162,1432502044&fm=26&gp=0.jpg" alt=""> <p class="overflowHide">文字文字文字文字文字文字文字文字</p> </li> </ul> </section> </body> </html> <script> function shipei() { document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; } shipei(); window.onresize = shipei; </script>
2、less
* { margin: 0; padding: 0; } ul, li { list-style: none; } p { color: #666; } .overflowHide { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .lrPadding { padding: 30 /@font-size 30 /@font-size 30 /@font-size 30 /@font-size; border-bottom: 1px solid #E6E6E6; } //声明一个变量 这个计算是重点，其他都是自定义 @design- 750; @font-size: @design-width / 10rem; .banner { font-size: 0; } .banner img { width: 750/@font-size; height: 280/@font-size; } .plateOne { display: flex; align-items: center; img { width: 180/@font-size; height: 120/@font-size; border-radius: 6 /@font-size; } p { margin-left: 30 /@font-size; font-size: 28 /@font-size; -webkit-line-clamp: 3; line-height: 42 /@font-size; } } .plateTwo { h4 { font-size: 30/@font-size; font-weight: 500; line-height: 42 /@font-size; } p { font-size: 28 /@font-size; -webkit-line-clamp: 2; line-height: 42 /@font-size; margin-top: 10 /@font-size; } } .plateThree { h4 { font-size: 30/@font-size; font-weight: 500; line-height: 42 /@font-size; } p { font-size: 28 /@font-size; margin-top: 10 /@font-size; } } .meetingList { border: none; ul { display: flex; li { flex: 1; margin-right: 30 /@font-size; &:last-child { margin-right: 0; } img { width: 150 /@font-size; height: 150 /@font-size; border-radius: 6 /@font-size; } p { font-size: 26 /@font-size; -webkit-line-clamp: 2; } } } }